0

我目前正在设置我的 webpack 以将所有文件提取.css到.scss1 个大文件中，这是通过使用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

0

modules为我从修复它中删除css-loader它，它正在创建本地范围的 css。

于 2017-07-25T14:43:00.657 回答