vue-cli4 配置全局scss/sass变量
tips:项目使用scss之前吗,首先看看是否sass相应的包1、_variables.scss文件/* Variables */// Base color$black:#2c2f38;$green:#1ddfbc;$blue:#2ec4d5;$fontColor:#e7ecf0;2、执行vue add style-resources-loadervue add style-...
·
tips:项目使用scss之前吗,首先看看是否sass相应的包
1、_variables.scss文件
/* Variables */
// Base color
$black:#2c2f38;
$green:#1ddfbc;
$blue:#2ec4d5;
$fontColor:#e7ecf0;
2、执行vue add style-resources-loader
vue add style-resources-loader
3、配置vue.config.js
const path = require("path");
module.exports = {
...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
//加上自己的文件路径,不能使用别名
path.resolve(__dirname, 'src/styles/_variables.scss'),
]
}
}
...
}
4、使用
<style lang="scss">
#app {
background-color: $black;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)