Vue中全局导入scss

Vue中全局导入scss

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

1. Vue/cli

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

1. 首先下载npm i sass-resources-loader
2. 在 vue.config.js中配置, 没有就新建一个

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()
       })
   }
}

或者可以写成

module.exports = {
	configureWebpack: {
		module: {
	      rules: [
	        // 全局导入 scss
	        {
	          test: /\.scss$/,
	          exclude: /node_modules/,
	          use: [
	            {
	              loader: 'sass-resources-loader',
	              options: {
	                resources: ['./src/styles/variables.scss']
	              }
	            }
	          ]
	        }
	      ]
	    }
	}
}

2.Vite

vite.config.ts文件

export default defineConfig(({ command, mode }) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables.scss";`
        }
      }
    },
  }
})

目录结构