CODEWITHSUNDEEP
webpackwebpack-dev-serverwebpack-2postcsspostcss-import
mrksbnch
mrksbnch

Reputation: 1842

Webpack Dev Server not compiling on change (imported CSS)

I have the following folder structure

src/
  assets/
    css/
      subfolder/
        imported.css
      main.css (-> imports "imported.css" with "postcss-import")
  components/
    Component1.vue
  App.vue (imports "main.css")
  main.js

I'm using vue-loader to compile the .vue files. In App.vue, I'm importing the main.css file (which imports multiple other css files, e.g. normalize and a simple grid system, with postcss-import). 

<template>

</template>

<script>

</script>

<style src="./assets/css/main.css"></style>

To compile everything, I'm using Webpack and Webpack Dev Server with the following config:

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'
}

This works just fine for every file except my imported.css file. Whenever I modify and save it, Webpack (Dev Server) doesn't recompile my assets. I have to manually switch to my main.css file or any .vue file an save that file to recompile. Is there any way to recompile assets even if I save my imported.css file?

Upvotes: 1

Views: 822

Answers (1)

Filip Dupanović
Filip Dupanović

Reputation: 33650

Older versions of postcss-import accepted the addDependencyTo option, but it has been deprecated for newer versions used in combination with postcss-loader, though I wonder if it still may be relevant in your case.

You would pass the loader context and postcss-import would call ctx.addDependency to tell Webpack that imported.css is a dependency of main.css.

Without this, you would get the kind of behavior that you're experiencing, that Webpack isn't watching and recompiling on changes in imported modules.

Upvotes: 1

Related Questions