如何使用 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