Webpack Dev сервер не компиляции на изменения (импортирован 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 сервера с помощью следующей конфигурации:

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