1

我有以下文件夹结构

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文件，有什么方法可以重新编译资产？

4

1 回答 1

1

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

您将传递加载程序上下文并postcss-import调用ctx.addDependency以告诉 Webpack 这imported.css是main.css.

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

于 2017-01-20T23:23:30.583 回答