我对这一切都很陌生，所以如果我的问题看起来很愚蠢，我提前道歉。我在使用 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 和不同加载器的不同教程，但我无法让它工作。
最佳答案
尝试同时使用 css-loader 和 style-loader，而不是单一使用。就像这样:
{
测试:/\.css$/,
使用:['样式加载器'，'css-加载器']
}
CSS 加载器确保加载任何必要的导入和文件，而样式加载器实际上应该将 CSS 注入(inject)到网页中。
取自样式加载器文档:https://github.com/webpack-contrib/css-loader#usage
关于javascript - 如何使用 webpack 渲染 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48653808/