Webpack Dev Server 未在更改时编译（导入的 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 Dev Server：

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 (Dev Server) 都不会重新编译我的资产。我必须手动切换到我的main.css 文件或任何.vue 文件并保存该文件以重新编译。即使我保存了imported.css 文件，是否有任何方法可以重新编译资产？

Answer 1

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

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

没有这个，你会得到你正在经历的那种行为，即 Webpack 不会监视和重新编译导入模块中的更改。