上一篇文章中讲到,如何在vue 项目中移入全局sass变量,那么定义的变量是否只能在 css 中使用呢, 答案是不, 可以在js 中使用, 很厉害的。
首先需要安装
> npm install sass-loader node-sass webpack --save-dev
在 vueconfig 中
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
最关键的是这里 在CSS Module 有一个:export关键字,它在功能上等同于 ES6 的关键字export,即导出一个 js 对象。
:export {
contentLayoutL: $layout-xl;
}
接下来 在 组件里引入
import egcommonCss from "../../common.scss";
console.log(egcommonCss.contentLayoutL)
ok 大功告成了