[英]Webpack: Why 'style-loader!css-loader!postcss-loader' doesn't process imported files?
[英]Watch imported css files in webpack + postcss-loader
将Webpack与postcss-loader结合使用以观察导入的css文件时遇到了一些麻烦。 它们在第一次运行时被处理,但是当我修改这些文件时,webpack不会重新编译。
例如
我有我的主css文件,我导入所有的css模块:
...
/* Base imports */
@import "base/base-imports";
...
在基础导入中,为了示例,我为身体应用了一种颜色:
body {
background: tomato;
}
我现在将背景设置为另一种颜色,以调试是否重新加载css文件,但不是。
这是我的webpack配置:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var fontMagician = require('postcss-font-magician');
var atImport = require('postcss-import');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
],
},
postcss: function(webpack) {
return [
autoprefixer({ browsers: ['last 2 versions'] }),
precss,
fontMagician,
atImport({
path: './src/styles/*.css',
addDependencyTo: webpack
}),
];
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'src/index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
],
devtool: 'source-map',
devServer: {
contentBase: './dist',
hot: true
},
}
好的,
这个问题有两个错误,所以解决方法是:
"base/_base-imports"
而不是@import "base/base-imports"
如果文件名为"_base-imports"
。 它没有像sass partial那样解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.