开发者问题收集

如何使用 webpack 渲染 CSS

2018-02-06
317

我对这些都很陌生,所以如果我的问题看起来很愚蠢,我提前道歉。我无法使用 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 和不同的加载器,但我无法让它工作。

2个回答

尝试同时使用 css-loader 和 style-loader,而不是仅使用其中一种。如下所示:

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

CSS loader 确保加载所有必要的导入和文件,而 style-loader 则应将 CSS 实际注入网页。

摘自 style-loader 文档: https://github.com/webpack-contrib/css-loader#usage

rickjerrity
2018-02-06

您是否需要/将 CSS 文件导入到您的入口点文件(或入口点导入的任何文件)中? 如 import './file.css';

jmarq
2018-02-07