Vue.js 在Vue SFC组件中导入SCSS文件而不与Webpack重复

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

我正在使用Webpack4和WebpackDevServer构建和运行带有热重新加载的开发服务。我没有使用Vue CLI创建项目

我有很多SFC（~50）和一个包含全局样式和变量的sass文件（index.scss）。我需要能够在我的SFC中使用index.scs中的样式和变量。我目前的方法是在我的网页sass加载器中使用数据选项

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加载程序中删除数据选项，但是这无法构建，因为它找不到我在SFCs中使用的变量

---

请参阅我的代码片段，大致了解如何设置加载程序。我觉得似乎有更好的方法可以做到这一点，无论是使用不同的加载程序/插件，还是我愿意使用我设法解决的不同方法。基本上，在处理每个Vue组件时，sass加载程序都会导入我的全局sass文件，其中包括变量、混合项，最重要的是我的样式。mymain.js中的import语句不起作用，因为在处理组件时变量和mixin不可用

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

因此，我将我的样式和变量拆分，并将其混合到单独的变量中

Styles=>Styles.scss

Variable and Mixins=>variableMixins.scss

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

我的网页包sass加载程序会是这样的

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

---

我设法解决了这个问题。基本上，在处理每个Vue组件时，sass加载程序都会导入我的全局sass文件，其中包括变量、混合项，最重要的是我的样式。mymain.js中的import语句不起作用，因为在处理组件时变量和mixin不可用

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

因此，我将我的样式和变量拆分，并将其混合到单独的变量中

Styles=>Styles.scss

Variable and Mixins=>variableMixins.scss

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

我的网页包sass加载程序会是这样的

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

---

一直在试图解决这个问题太久了

这个解决方案很有效，但对我来说并不完美，因为我想将特定事物的变量和全局样式保持在一起

_例如，typography.scss应包含与全局线条高度和垂直节奏相关的一般样式和变量

然后更具体地说，像_H1.scss这样的组件将包含它自己的沙盒样式

我不希望每个组件都复制这些常规样式

使用CSS的价值在于共享样式，并能够在项目中进行全局调整和重新命名。组件通过对所有内容进行沙箱处理来实现相反的效果

我认为CSS目前与组件化开发不一致，答案可能是创建一种新的方法，在这种方法中，我们使用“组件生态系统”在其他愚蠢的节点之间创建关系

---

有点像我们在JS中如何使用显示模块模式。

试图解决这个问题的时间太长了

这个解决方案很有效，但对我来说并不完美，因为我想将特定事物的变量和全局样式保持在一起

_例如，typography.scss应包含与全局线条高度和垂直节奏相关的一般样式和变量

然后更具体地说，像_H1.scss这样的组件将包含它自己的沙盒样式

我不希望每个组件都复制这些常规样式

使用CSS的价值在于共享样式，并能够在项目中进行全局调整和重新命名。组件通过对所有内容进行沙箱处理来实现相反的效果

我认为CSS目前与组件化开发不一致，答案可能是创建一种新的方法，在这种方法中，我们使用“组件生态系统”在其他愚蠢的节点之间创建关系

---

有点像我们在JS中使用显示模块模式。

我们最终将css拆分为单独的文件（每个组件一个），将它们全部导入

index.scss

并在App.vue中导入索引`

import'@/scss/index.scss'

这消除了大量的膨胀/重复，并大大简化了工作流程：使用sourcemaps+工作区，我们现在可以在devtools中直接编辑SCS，它不会破坏布局或增加

标记，也不会做任何其他关于Webpack和vue cli github问题的夸夸其谈

令人惊讶的是，即使是css的代码拆分也仍然有效，动态加载的模块也有各自的css文件

如果您需要范围界定（这是您需要的），只需在主节点上使用id=“component name”，并将您的SCS封装在

#组件名称{
...
}

这让我很惊讶