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, например, нормализовать и простую сеточную систему, с 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 не отслеживает и не перекомпилирует изменения в импортированных модулях.