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没有观察并重新编译导入模块的变化。

Webpack Dev Server无法编译更改（导入的CSS）

1 个答案: