vue-cli 2.0
使用sass-resources-loader解決Sass全局變量問(wèn)題
安裝 sass-resources-loader
npm install sass-resources-loader --save-dev
相關(guān)配置
找到build文件下的utils文件這個(gè)位置
將scss項(xiàng)改為
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader', // 為了scss全局變量能在vue文件中使用
options: {
resources: path.resolve(__dirname, './../src/assets/css/colorConfig.scss')
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
vue-cli 3.0
在vue.config.js里配置
css: {
loaderOptions: {
sass: {
// data：`@import "~@/assets/common.scss";` v7之前使用 的是data，現(xiàn)在改成了prependData
prependData: `@import "~@/assets/css/common.scss";`
}
}
}
