Webpack编译postcss问题

Question

现在有个场景：

page.css 中 import 了_var.css

page.css:

@import "../../base/styles/_var.css";

#a {

}
...

我发现在改 _var.css 的时候 page.css 不会发生变化，必须在保存 page.css 的时候才会进行编译，是反向追踪依赖的问题吗？求朋友们解答，webpack 配置如下：

module: {
    loaders: [
      { test: /\.js$/, exclude: ['node_modules'], loader: 'babel' },
      //css modules https://github.com/css-modules/webpack-demo
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader",
        "css-loader?modules&importLoaders=1&localIdentName=[1]-[2]-[local]&localIdentRegExp=.*\/.*\/(.*)\/(.*)\/!postcss-loader") }
    ]
  },

Answer 1

@import是原生写法 浏览器读到这个css的时候才会解析import的css内容

使用 import 即可

Answer 2

首先，当你使用extract-text-webpack-plugin的时候，看文档：extract-text-webpack-plugin，里面就提到了No Hot Module Replacement。不能热更新。

然后你说的"在改 _var.css 的时候 page.css 不会发生变化"，需要你更多的场景描述，譬如：你怎么启动server的，html怎么引用的。。。。

Answer 3

不使用extract-text-webpack-plugin插件

另可以使用postcss-import插件来简化@import时需要写的路径

示例

          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('postcss-import')({
                  path: path.join(baseDir, './src/style'),
                }),
                require('postcss-cssnext'),
                require('postcss-nested'),
                require('postcss-functions')({
                  functions: {
                    // any funcs you wanna
                  },
                }),
              ],
            },
          },

Answer 4

需要postcss-import插件 安装该插件后 在你的postcss配置中的plugin里面添加reuqire('postcss-import')