vue 打包sass 配置

方案一：

style-resources-loader

• 1安装 vue add style-resources-loader 或者 npm install style-resources-loader

  
  
  image.png

• 2 vue.config.js 里面配置

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
      // 这里假设你有 `src/variables.scss  src/scss/mixin.scss` 这两个文件
        path.resolve(__dirname,"./src/scss/variables.scss"),
        path.resolve(__dirname,"./src/scss/mixin.scss")
      ]
    }
  }
}

方案二

• 1 vue.config.js 里面配置sass

configureWebpack: {
    css: {
        loaderOptions: {
            sass: {
                // sass-loader v8-，这个版本之前的键名是：data
                //sass-loader v8，这个版本后的键名是：prependData
                //sass-loader v10+，这个版本之后的键名是：additionalData
                additionalData(content, loaderContext) {
                    const {
                        resourcePath,
                        rootContext
                    } = loaderContext
                    const relativePath = path.relative(rootContext, resourcePath)
                    if (
                        relativePath.replace(/\\/g, '/') !== 'src/styles/variables.scss'
                    ) {
                        return '@import "~@/sass/variables.scss";' + content
                    }
                    return content
                }
            }
        }
    }
}