停止提取- CSS -块-webpack-插件从合并所有CSS

Question

我正在使用Webpack 4建立一个简单的网站与一个快速后端。现在，我正在实现一个自定义元素，我面临一个关于影子DOM的问题。

问题如下:我所有的SCSS都被合并成一个CSS输出文件。我需要它保持独立，以便在元素连接时，可以动态地将自定义元素的样式添加到阴影DOM中。

我正在使用extract-css-chunks-webpack-plugin (我认为这是问题所在)、css-loader、postcss-preset-env和sass-loader来处理应用程序/站点中的所有SCSS。

到目前为止，我所做的所有搜索都让我找到了与我所需要的完全相反的东西(人们试图将他们的SCSS组合起来)。

我知道我可以单独构建自定义元素，然后在构建之后将它导入到项目中，但这意味着管理两个构建环境，然后必须对这两个环境进行版本控制--这似乎需要很大的开销。

该项目的文件夹结构如下：

root
--src/
----assets/
------js/
--------main.js
------scss/
--------main.scss
------web-components/
--------contact-modal.js
--------scss/
----------modal.scss

我现在的webpack开发配置如下：

    **omitted**

    module: {
        rules: [{
                test: /\.(scss)$/,
                use: [{
                        loader: ExtractCssChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            indent: 'postcss',
                            plugins: () => postcssEnv(),
                            sourceMap: 'inline',
                        },

                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },

    **omitted**

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/views/pages/index.ejs',
            filename: 'index.html',
        }),
        new ExtractCssChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        })
    ]

如果有一个更好的方式使用自定义元素，我忽略了，我会感谢任何反馈。

提前谢谢你。

编辑：

如图所示，我在contact-modal.js文件中包含了带有导入的modal.scss文件，这将是有益的。

Answer 1

为了解决我的问题，同时仍然使用SCSS (为了允许我使用供应商前缀从postcss-加载器)，我最终用一个.modal标志前缀我的模态scss，所以modal.scss成为main.modal.scss。

然后，我编辑了webpack配置，为scss文件设置了两个规则:一个只影响.scss文件，另一个影响.modal.scss。

然后，在我的模型中，我用一个普通的import style from './main.modal.scss';导入了scss，然后将它附加到<style></style>元素中的影子DOM中。

守则如下：

新SCSS规则

                test: /(\.modal\.scss)$/,
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [ postcssPresetEnv() ],
                            sourceMap: 'inline'
                        }
                    },
                    'sass-loader'
                ]

修改的旧SCSS规则

                test: /(?<!\.modal)\.scss$/,
                use: [{
                        loader: ExtractCSSChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 3
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                postcssPresetEnv()
                            ],
                            sourceMap: 'inline'
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]

在我的联系人-modal.js文件中

import CSS from './scss/main.modal.scss';

    // ... omitted ...

    connectedCallback() {

    // ... omitted ...

    const style = document.createElement('style');
    style.innerHTML = CSS.toString();
    this.shadow.appendChild(style);

    // ... omitted ...
}

Answer 2

我假设modal.scss正在导入main.scss？如果是这样的话，那么您的问题在于Sass编译器本身，而不是webpack。根据modal.scss中的内容，您可能希望使用@use

编辑1：

如果要在阴影DOM中添加编译后的css，比如一个<style>标记，可以用类似于到字符串加载程序的东西替换ExtractCSSChunks加载器。在js中，import style from "modal.scss";将把编译后的输出放在可以使用的字符串中。