我有以下 css 文件:
<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">
和下面的 webpack 配置
var path = require("path");
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true',
options: {debug: true, warn: true},
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
},
resolve: {
mainFields: [ 'main'],
}
};
当我使用 webpack-dev-server 时,内存文件服务器似乎有正确的 css 文件。但是当我调用
yarn build
它不会复制我的 dist 文件夹中的 css 文件,因此无法加载 css 文件。
最佳答案
您是否在模块中导入 css 文件?我认为你需要使用 ExtractTextWebpackPlugin它将 js 包中的 css 提取到一个单独的 css 文件中。
但这不适用于 webpack-dev-server,因此您需要在用于开发服务器的配置中禁用该插件。有一个选项可以让您这样做:
new ExtractTextPlugin({
filename: '[name].css',
disable: true,
}),
关于javascript - Webpack 没有将 css 复制到 dist,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48041902/