Vue中全局导入scss
Vue中全局导入scss
需求: 定义的全局变量和mixins都需要在每个文件下面导入一次, 显得过于繁琐
借助于第三方模块sass-resources-loader可以很方便的直接在全局导入
1、首先下载
C/C++ Code复制内容到剪贴板
- npm i sass-resources-loader
2、在 vue.config.js中配置, 没有就新建一个
C/C++ Code复制内容到剪贴板
- 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({
- // 可以使用数组的方式导入,数组里面的文件就可以全局使用了
- resources: ['./src/styles/mixins.scss', './src/styles/variable.scss']
- })
- .end()
- })
- }
- }
或者
C/C++ Code复制内容到剪贴板
- module.exports = {
- configureWebpack: {
- module: {
- rules: [
- // 全局导入 scss
- {
- test: /\.scss$/,
- exclude: /node_modules/,
- use: [
- {
- loader: 'sass-resources-loader',
- options: {
- resources: ['./src/styles/variables.scss']
- }
- }
- ]
- }
- ]
- }
- }
- }
