3

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

1 回答 1

5

好的，

这个问题有两点错误，所以解决方案是：

  1. 在 precss 之前做 atImport，谢谢@Kreozot。
  2. 引用准确的 css 文件名。我的意思是：@import"base/_base-imports"而不是@import "base/base-imports"如果文件名是"_base-imports". 它不像 sass partial 那样被解决。
于 2016-01-15T16:56:19.310 回答