在 Vue SFC 组件中导入 SCSS 文件，无需使用 Webpack 进行重复

当我尝试访问所有 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 文件很大。我可以使用缩小过程进行部署，但这根本不适合本地开发。

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

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

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

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

所以我将样式、变量和 Mixins 分成单独的变量

样式 => styles.scss

变量和混合=>variableMixins.scss

then import ./styles/styles.scss在我的 main.js 中

我的 webpack sass-loader 会像

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