1

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

ответ

1

Старые версии postcss-import принял вариант addDependencyTo, но он устарел для новых версий, используемых в сочетании с postcss-loader, хотя мне интересно, если он все еще может иметь значение в вашем случае.

Вы бы передать контекст загрузчика и postcss-import назвали бы ctx.addDependency сказать, что Webpack imported.css является зависимость main.css.

Без этого вы получите поведение, которое вы испытываете, что Webpack не просматривает и не перекомпиляет изменения в импортированных модулях.

+0

Спасибо, нужно ли использовать 'ctx.addDependency' для каждого импортированного файла CSS (в моем случае это довольно много), или есть ли другой способ включить кучу файлов? Поскольку этот метод устарел, мне также интересно, что бы я сделал, если эти методы будут удалены в какой-то момент (я посмотрел документы 'postcss-loader', но я не уверен, как включить это с помощью' vue- loader')? – Daniel

+0

@ Даниэль, глядя на некоторые открытые/закрытые проблемы в хранилище 'vue-loader', действительно, это, по-видимому, является основной причиной. Я не уверен, есть ли рабочая настройка для PostCSS, которая поддерживала бы HMR, или если вам придется ждать, когда какой-нибудь PR включит это. –

Смежные вопросы