Update201936:发现一个更好的方法,预处理器加载一个全局设置文件官方github给出了详细的配置。在SCSS中使用变量很方便,创建一个variables.scss文件 Update2019/3/6:发现一个更好的方法,预
Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件
官方github给出了详细的配置。
在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声明各种变量,如果你需要使用这些变量,就使用@import variables.scss导入这个文件即可。但这样会存在两个小问题:
- 每次使用都要导入,不优雅
- Javascript 文件无法使用这些变量
有没有两全其美并足够简单的方法呢?(:废话
假设有这样一个保存 scss 变量的文件,style/scss/variables.js:
module.exports = { 'red-color': 'red', 'px': `${1/20}rem`}仅需要在 webpack.config.js 中更改下配置:
let styleVariables = require('/style/scss/variables')// 其他配置...{ test: /\.scss$/, use: [ 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: { data: Object.keys(styleVariables) .map(k => `\$${k}: ${styleVariables[k]};`) .join('\n') } } ]},那么在任意 scss 中,都可以直接使用我们在 Javascript 文件中声明的变量,而无需额外引入: // page-a.scss
.page-a { height: 20*$px; color: $red-color;}