Webpack开发服务器更改时未编译(导入的CSS)

Question

我有以下文件夹结构

src/
  assets/
    css/
      subfolder/
        imported.css
      main.css (-> imports "imported.css" with "postcss-import")
  components/
    Component1.vue
  App.vue (imports "main.css")
  main.js

我正在使用vue-loader编译.vue文件。在App.vue中，我导入了main.css文件(它导入了多个其他css文件，例如normalize和一个简单的网格系统，使用postcss-import)。

<template>

</template>

<script>

</script>

<style src="./assets/css/main.css"></style>

要编译所有内容，我使用的是具有以下配置的Webpack和Webpack开发服务器：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: [
            require('postcss-import')(),
            require('postcss-cssnext')(),
            require('postcss-reporter')()
          ]
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

这对除我的imported.css文件之外的每个文件都很有效。每当我修改并保存它时，Webpack (开发服务器)都不会重新编译我的资源。我必须手动切换到我的main.css文件或任何.vue文件，并保存该文件以重新编译。即使我保存了我的imported.css文件，有没有办法重新编译资源？

Answer 1

旧版本的postcss-import接受addDependencyTo选项，但对于与postcss-loader结合使用的新版本，它已被弃用，尽管我想知道它是否仍然适用于您的情况。

您将传递加载器上下文，并且postcss-import将调用ctx.addDependency来告诉Webpack imported.css是main.css的依赖项。

如果没有这个，你会得到你正在经历的那种行为，那就是Webpack不会观察和重新编译导入模块中的更改。