vue2.x+webpack4.x 全局引入scss文件的配置方案

375 阅读1分钟

背景: Vue项目每个组件都@import 一些scss的方法或者变量,特别是rem函数,是很不方便的,也不方便统一,所以,能不能全局引入这个文件呐,是可以的

方法:

{
    test: /\.(c|sa|sc)ss$/, // 它会应用到普通的 `.css|.sass|.sacc` 文件,以及 `.vue` 文件中的 `<style>` 块
    use: [
        process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, // 请只在生产环境下使用 CSS 提取,这将便于你在开发环境下进行热重载
        'css-loader',
        'postcss-loader',
        // 'sass-loader' 下面就是这一次的关键
        {
            loader: 'sass-loader',
            options: {
                data: `
                    @import "src/commons/styles/rem.scss";
                    @import "src/commons/styles/var.scss";
                    @import "src/commons/styles/mixins.scss";
                `
            }
        }
    ]
},