Question

我对这一切都很陌生，所以如果我的问题看起来很愚蠢，我会提前道歉。我在使用webpack包含CSS文件时遇到问题。我的webpack.config.js文件看起来像这样

const HTMLWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + '/app/index.js',
    resolve: {
        modules: [__dirname, 'node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
    },
    plugins: [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin('styles.css')
    ]
};

当webpack做了它的事情时，我的CSS文件不包括在内。我已经完成了五六个不同的教程，处理html-webpack-plugin和不同的加载器，但是我无法让它工作。

Answer 1

尝试同时使用css-loader和style-loader，而不是退回到一个。像这样：

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

CSS加载器确保加载任何必要的导入和文件，而style-loader实际上应该将CSS注入网页。

取自样式加载器文档：https://github.com/webpack-contrib/css-loader#usage

Answer 2

您是否要求/将CSS文件导入入口点文件（或入口点导入的任何文件）？与import './file.css';

中一样

如何使用webpack呈现CSS

2 个答案: