需要安装一个插件:sass-resources-loader
npm i sass-resources-loader --save-dev
建一个scss文件common.scss
$input-color: #888;
在vue.config.js配置(官网灰机)
// css预设器配置项
loaderOptions: {
// 给 sass-loader 传递选项
scss: {
// sass-loader版本V8以上
prependData: '@import "~@/assets/common.scss";'
// sass-loader版本V8以下
// additionalData: '@import "~@/assets/common.scss";'
}
}
在组件中直接使用
input {
color: $input-color;
}
sass安装注意事项:node版本和node-sass的依赖版本不一致问题,sass-loader11要求webpack5,webpack版本控制是安装vue cli的版本,vue cli5则webpack5
最后一步,记得重启项目!
云卷云舒,花开花落,我,依旧还是我