使用 Webpack 在 Vue SFC 组件中导入 SCSS 文件而无需重复 [英] Importing SCSS file in Vue SFC components without duplication with Webpack

问题描述

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

When I try to access a scss file in all my Vue SFCs the styles are duplicated causing large css bundles and Dev Tools to crash when style debugging

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

I am using Webpack 4 and webpack-dev-server to build and run development services with hot reload. I did not create the project with Vue CLI.

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

I have quite a lot of SFCs (~50) and a sass file (index.scss) that contains global styles and variables. I need to be able to use the styles and variables in index.scss across my SFCs. My current approach is using the data option in my 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 文件很大.我可以使用压缩过程进行部署，但这根本不适合本地开发.

This is successful, however I am noticing my index.scss styles included in every component. Local development with devserver is almost impossible because the duplication across 50 components is so vast and devtools can't cope. When I do a build to extract the css then I can see the duplication and the app.css file is huge. I can use a minifying process for deployments but this is not suitable at all for local development.

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

I have tried other approaches such as removing the data option from sass-loader using import ./styles/index.scss in my main.js file instead, however this fails to build because it can't find the variables I use in my SFCs.

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

Please see my code snippet for roughly how I have my loaders set up. I feel as if there is a better way to do this, whether it's using different loaders/plugins and I am open to using different approaches

推荐答案

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

I managed to solve. Essentially when every Vue component was being processed then the sass-loader was importing my global sass file that included Variables, Mixins and most importantly my Styles. The import statement in my main.js doesn't work because the Variables and Mixins are not available by the time the component is being processed.

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

So I only need to import Variables and Mixins in my components and the Styles can be external and included in my main.js. Since Variable and Mixins are just being included when required (with @include statements), then there is no duplication since it's getting compile to CSS.

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

So I split my Styles and Variables and Mixins into separate variables

样式 => 样式.scss

Styles => styles.scss

Variable 和 Mixins => variableMixins.scss

Variable and Mixins => variableMixins.scss

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

我的 webpack sass-loader 就像

and my webpack sass-loader would be like

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

这篇关于使用 Webpack 在 Vue SFC 组件中导入 SCSS 文件而无需重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！