Question

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

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

我有很多SFC（〜50个）和一个sass文件（index.scss），其中包含全局样式和变量。我需要能够在我的SFC中使用index.scss中的样式和变量。我当前的方法是在Webpack sass-loader中使用data选项。

RewriteEngine on

RewriteRule ^index\.php$ /folder1/index100.php [L,R]

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

我尝试了其他方法，例如使用main.js文件中的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";` } } ] } ] }从sass-loader中删除data选项，但是由于无法找到我在SFC中使用的变量，因此无法构建。

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

Answer 1

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

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

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

Styles => styles.scss

Variable and Mixins => variableMixins.scss

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

和我的webpack sass-loader就像

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

Answer 2

试图解决这个问题太久了。

此解决方案有效，但对我而言并不完美，因为我想将特定事物的变量和全局样式放在一起。

例如，

_typography.scss应该包含有关整体线条高度和垂直节奏的常规样式和变量。

从粒度上讲，像_H1.scss这样的组件将包含其自己的沙盒样式。

我不想为每个组件复制那些通用样式。

使用CSS的价值在于共享样式，并能够在全球范围内调整和重塑项目中的品牌。组件通过将所有内容沙盒化来实现相反的目的。

我认为CSS当前与组件化开发背道而驰，也许答案可能是创建一种新方法，其中我们使用“组件生态系统”在其他哑节点之间建立关系。

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

Answer 3

我们最终将css拆分为单独的文件（每个组件一个），将它们全部塞入index.scss中，并将索引导入App.vue`

import '@/scss/index.scss'

这消除了很多膨胀/重复并大大简化了工作流程：使用Sourcemaps +工作区，我们现在可以直接在devtools中编辑scss，并且不会破坏布局或使用<style>标签，也不会做任何其他描述的夸克Webpack和vue-cli的github问题。

令人惊讶的是，即使是CSS的代码拆分仍然有效，并且动态加载的模块具有各自的CSS文件。

如果您需要范围界定（您需要），只需在主节点上使用id =“ component-name”并将scss包装在

#component-name { 
...
}

这让我感到惊讶，Devtools，Webpack等公司不支持现代的CSS技术。每个方面都充满了bug，只有简单的场景才可以使用（如果可以的话）。

无需复制Webpack即可在Vue SFC组件中导入SCSS文件

3 个答案: