我在将 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
},
}