javascript - 停止 extract-css-chunks-webpack-plugin 组合所有 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

我假设 modal.scss正在进口main.scss ？如果是这样，那么您的问题出在 Sass 编译器本身，而不是 webpack。取决于 modal.scss 中的内容, 你可能想使用 @use 相反

编辑 1:

如果您要将已编译的 css 添加到影子 DOM 中，假设是 <style>标签，你可以用类似 to-string-loader 的东西替换 ExtractCSSChunks 加载器.在你的 js 中，import style from "modal.scss";将在您可以使用的字符串中包含已编译的输出。