的WebPack开发服务器没有编制上的变化（进口CSS）

我有以下文件夹结构的WebPack开发服务器没有编制上的变化（进口CSS）

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文件（使用postcss-import导入多个其他css文件，例如normalize和简单的网格系统）。

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

来源

2017-01-20 Daniel

的postcss-import旧版本接受addDependencyTo选择，但它已被否决的组合使用，postcss-loader新版本，但我不知道，如果它仍然可能是你的情况相关。

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

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

来源

2017-01-20 23:23:30

谢谢，我必须对每个导入的CSS文件使用'ctx.addDependency'（在我的情况下有相当一部分），还是有其他方式来包含一堆文件？由于此方法已被弃用，我还想知道如果在某个时候删除了这些方法，我会怎么做（我查看了'postcss-loader'文档，但我不知道如何将这个方法与'vue- loader'）？ – Daniel

@Daniel看着'vue-loader'版本库中的一些开放/关闭问题，的确这似乎是根本原因。我不确定是否有支持HMR的PostCSS工作设置，或者您是否需要等待某个PR启用此功能。 –

的WebPack开发服务器没有编制上的变化（进口CSS）

回答

相关问题