0

.css現在、すべての.scssファイルを 1 つの大きなファイルに抽出するように webpack をセットアップしていますextract-text-webpack-plugin。ファイルが正しくコンパイルされ、html (で作成html-webpack-plugin) に含まれていることがわかります。しかし、何らかの理由でCSSが実際のページに適用されていません。

エントリ

entry: {
    app: [
        'react-fastclick',
        './js/index.js',
    ],

    styles: './styles/global.scss'
}

ルール

rules: [
    {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[hash:base64:5]',
                        minimize: true,
                        sourceMap: true
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        outputStyle: 'collapsed',
                        sourceMap: true,
                        includePaths: [path.resolve(__dirname, 'src')]
                    },
                },
            ],
            publicPath: '/dist'
        })
    }
    // ...
]

プラグイン

plugins: [
    new HtmlWebpackPlugin({
        title: 'Wizer',
        hash: false,
        production: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
        },
        template: 'index.ejs',
    }),

    new ExtractTextPlugin({
        filename: '[name].[chunkhash].css',
        disable: false,
        allChunks: true
    }),

    // ...
]

HTML出力

<!DOCTYPE html>
<html>

<head>
    <link rel="preload" href="/app.f599f29bd646377f7788.js" as="script">
    <link rel="preload" href="/styles.e3acd4dcb1836b477ae7.css" as="script">
    <link rel="preload" href="/vendor.52867bd4bd63ce12d65a.js" as="script">
    <link href="/styles.e3acd4dcb1836b477ae7.css" rel="stylesheet">
</head>

<body>
    <div id="react_root"></div>
    <script type="text/javascript" src="/vendor.52867bd4bd63ce12d65a.js"></script>
    <script type="text/javascript" src="/app.f599f29bd646377f7788.js"></script>
</body>

</html>
4

1 に答える 1