通过 sass-resources-loader 全局注册 Sass 变量
如何在我们的vue项目中全局引入scss文件呢
公共样式可以写在app.vue这个父组件的style标签中,这样我们写的子组件就能继承这些公共样式,但是,我们自定义的scss的变量继承不了!!
如果我们想使用公共的scss样式变量(比如app的主题颜色
),我们就只能是每写一个.vue
文件都要在style标签里面
- 安装
node-sass、sass-loader、style-loader
1 npm install node-sass 2 npm install sass-loader 3 npm install style-loader
- 安装
sass-resources-loader
1 npm install sass-resources-loader
- 修改build中的
utils.js
1 将 scss: generateLoaders('sass') 2 修改成: 3 scss: generateLoaders('sass').concat( 4 { 5 loader: 'sass-resources-loader', 6 options: { 7 resources: path.resolve(__dirname, '../src/assets/style/public-variables.scss') 8 } 9 } 10 )
public-variables.scss文件$color-red: #F56C6C;
-
在assets中创建了一个public-variables.scss作为公共样式文件。
最后在vue组件中的style标签中添加
lang="scss"
,就ok了。这样我们就实现了全局引入scss中的变量$color-red。