安装node-sass、sass-loader、style-loader、sass-resources-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install sass-resources-loader --save-dev
配置sass-resources-loader入口文件
在vue.config.js中
const {
defineConfig
} = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: { //代理配置
//...
},
chainWebpack: config => {
// sass-resources-loader 公共样式文件配置,可全局使用变量
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// 写入定义基础样式的scss文件路径
resources: [
'./src/assets/styles/common.scss',
]
})
.end()
})
},
});
在assets下新建style文件,并新建common.scss样式文件。
//./src/assets/styles/common.scss ----公共样式文件
$price-color:#8B0000;
组件内使用:
style标签添加 lang="scss"
//组件内使用
<style lang="scss" scoped>
//样式变量使用
.price {
color: $price-color;
}
</style>