- 需要借助 sass-resources-loader工具
npm install sass-resources-loader
- 在src\assets\css 目录中新建一个common.scss文件,并且声明一个变量
/* common.scss */
$main-color: darkolivegreen;
- 然后在项目的根目录下,新建vue.config.js文件,输入以下内容
// vue.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
// 要公用的scss的路径
resources: './src/assets/css/common.scss'
})
.end()
})
}
}
- 接着在.vue文件中,就可以直接用color:$main-color了
// home.vue
<style lang="scss" scoped>
.search{
font-size: 12px;
color: $main-color;
}
</style>