方案一：
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
}
}
}
}
}
