Vue中全局导入scss
需求: 定义的全局变量和mixins
都需要在每个文件下面导入一次, 显得过于繁琐
1. Vue/cli
借助于第三方模块sass-resources-loader可以很方便的直接在全局导入
- 首先下载
npm i sass-resources-loader
- 在
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";`
}
}
},
}
})
目录结构