Styles 未使用 Webpack MiniCssExtractPlugin 与 Create React App 插入 HEAD

Question

我正在使用 create-react-app 使用 Storybook JS 创建组件库。 目的是发布 NPM package，这些组件可用于其他项目。 SASS 用于这个库，定义了全局变量并导入到src/index.js文件中。

我正在测试我的 NPM package，并尝试将它与 Webpack V4 捆绑在一起。 在另一个本地项目上使用npm link已半成功。 但是，我遇到了 MiniCssExtractPlugin 的问题，其中 styles 根本没有插入到该项目的 HEAD 中。

SASS 样式表被转换为 CSS 并添加到我的组件库项目的dist/文件夹中，没有任何问题。 但是，当通过 NPM package 将组件导入我的其他项目时，这些不会在任何地方应用，例如import { Button } from '@my-account/components';

使用 style-loader 时，我的开发环境没有问题，并且 styles 使用<style>标签直接插入到 DOM 中。 我确定我一定遗漏了一些东西，但我觉得我已经用尽了一切来尝试诊断这个。 create-react-app 与此插件不兼容吗？ 还是 styles 没有通过 NPM 包自动注入到项目的 HEAD 中？

如果我将文件从 NPM package 导入到我的本地项目中，则样式确实有效，例如import '@my-account/components/dist/main.cd2be00655e79c5077cb.css'; - 但是，如果定期更新 styles 并且文件在其名称中使用 hash，这似乎无法维护？

我尝试添加 HtmlWebpackPlugin 来创建 index.html 文件，但这并没有解决问题。

任何帮助将不胜感激！

webpack.config.prod.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'production',
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader',
            }
        ],
        rules: [
            {
                test: /\.scss$/,
                sideEffects: true,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: require(path.join(process.cwd(), 'src/assets/sass/WebpackStyles.js')),
                            hoistUseStatements: true
                        }
                    }
                ],
            },
        ]
    },
    resolve: {
        extensions: ['.js'],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css'
        })
    ]
};

Answer 1

组件库通常需要与 js 一起导入 css 才能正常工作。 如果您将插件更新为：

    new MiniCssExtractPlugin({
        filename: '[name].css'
    })

然后，您可以指示您的库的使用者添加import '@my-account/components/dist/main.css' ，这更容易理解。 我不确定是否有一种神奇的方法可以让 styles 在您的消费者中没有广泛的自定义 webpack 装载机出现。