Vue中全局导入scss
vue 2022-06-23 14:37:00

Vue中全局导入scss

需求: 定义的全局变量和mixins都需要在每个文件下面导入一次, 显得过于繁琐

借助于第三方模块sass-resources-loader可以很方便的直接在全局导入

1、首先下载

C/C++ Code复制内容到剪贴板
  1. npm i sass-resources-loader  

 

2、在 vue.config.js中配置, 没有就新建一个

C/C++ Code复制内容到剪贴板
  1. module.exports = {  
  2.   chainWebpack: (config) => {  
  3.        const oneOfsMap = config.module.rule('scss').oneOfs.store  
  4.        oneOfsMap.forEach((item) => {  
  5.            item.use('sass-resources-loader')  
  6.                .loader('sass-resources-loader')  
  7.                .options({  
  8.                    // 可以使用数组的方式导入,数组里面的文件就可以全局使用了  
  9.                    resources: ['./src/styles/mixins.scss''./src/styles/variable.scss']  
  10.                })  
  11.                .end()  
  12.        })  
  13.    }  
  14. }  

 

或者

C/C++ Code复制内容到剪贴板
  1. module.exports = {  
  2.     configureWebpack: {  
  3.         module: {  
  4.           rules: [  
  5.             // 全局导入 scss  
  6.             {  
  7.               test: /\.scss$/,  
  8.               exclude: /node_modules/,  
  9.               use: [  
  10.                 {  
  11.                   loader: 'sass-resources-loader',  
  12.                   options: {  
  13.                     resources: ['./src/styles/variables.scss']  
  14.                   }  
  15.                 }  
  16.               ]  
  17.             }  
  18.           ]  
  19.         }  
  20.     }  
  21. }  

 

 

 

本文来自于:http://www.yoyo88.cn/study/vue/627.html

下一篇 返回列表
Powered by yoyo苏ICP备15045725号