vue.js - 在不与 Webpack 重复的情况下在 Vue SFC 组件中导入 SCSS 文件

Question

当我尝试在我所有的 Vue SFC 中访问一个 scss 文件时，样式被复制导致大型 css 包和开发工具在样式调试时崩溃

我正在使用 Webpack 4 和 webpack-dev-server 来构建和运行支持热重载的开发服务。我没有使用 Vue CLI 创建项目。

我有很多 SFC (~50) 和一个包含全局样式和变量的 sass 文件 (index.scss)。我需要能够在我的 SFC 中使用 index.scss 中的样式和变量。我目前的方法是在我的 Webpack sass-loader 中使用数据选项。

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
        },
        {
            test: /\.scss$/,
            use: [
                isDev ? { loader: 'vue-style-loader', options: { sourceMap: hasSM }} : {loader: MiniCssExtractPlugin.loader },
                {   
                    loader: 'css-loader', 
                    options: {
                        sourceMap: hasSM 
                    }
                },
                { 
                    loader: 'sass-loader', 
                    options: { 
                        sourceMap: hasSM, 
                        data: `@import "@/styles/index.scss";`
                    }
                }
            ]
        }
    ]
}

这是成功的，但是我注意到我的 index.scss 样式包含在每个组件中。使用 devserver 进行本地开发几乎是不可能的，因为 50 个组件之间的重复是如此之大，而 devtools 无法应对。当我构建以提取 css 时，我可以看到重复项并且 app.css 文件很大。我可以使用缩小过程进行部署，但这根本不适合本地开发。

我尝试了其他方法，例如在我的 main.js 文件中使用 import ./styles/index.scss 从 sass-loader 中删除数据选项，但是这无法构建，因为它可以'找到我在 SFC 中使用的变量。

请查看我的代码片段，大致了解我是如何设置加载程序的。我觉得好像有更好的方法来做到这一点，无论是使用不同的加载器/插件，我都愿意使用不同的方法

Answer 1

我设法解决了。本质上，当每个 Vue 组件都被处理时，sass-loader 正在导入我的全局 sass 文件，其中包括变量、混合和最重要的我的样式。我的 main.js 中的 import 语句不起作用，因为在处理组件时变量和混合不可用。

所以我只需要在我的组件中导入变量和混合，样式可以是外部的并包含在我的 main.js 中。由于 Variable 和 Mixins 仅在需要时被包含(使用 @include 语句)，因此没有重复，因为它正在编译为 CSS。

所以我将我的样式和变量以及 Mixins 拆分为单独的变量

样式 => styles.scss

变量和混合 => variableMixins.scss

然后 在我的 main.js 中导入 ./styles/styles.scss

我的 webpack sass-loader 会像

            { 
                loader: 'sass-loader', 
                options: { 
                    sourceMap: hasSM, 
                    data: `@import "@/styles/variableMixins.scss";`
                }
            }