Webpack и Precss не перезагружаются при изменении файла @import

Я настраиваю базовую установку Webpack и хочу, чтобы браузер автоматически перезагружал предварительно обработанный CSS в @imported файлах с помощью PostCSS и плагин PreCSS. В настоящее время, если я изменяю и сохраняю файл @imported, браузер не обновляется (body.css в приведенном ниже примере). Если я затем сохраню файл CSS, на который ссылается корень (styles.css), тогда браузер обновится, а также отобразит любые изменения, внесенные в файл @imported.

Я пробовал использовать настраиваемый webpack-dev-server и server.js. Я пробовал без и с установленной перезагрузкой горячей модели (HMR).

Есть ли способ заставить веб-пакет смотреть @импортированные файлы CSS, или я что-то здесь принципиально упускаю?

package.json

"dependencies": {
  "react": "^0.14.0",
  "react-dom": "^0.14.0"
},
"devDependencies": {
  "autoprefixer": "^6.3.1",
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "postcss-loader": "^0.8.0",
  "postcss-scss": "^0.1.3",
  "precss": "^1.4.0",
  "react-hot-loader": "^1.3.0",
  "style-loader": "^0.13.0",
  "webpack": "^1.12.13",
  "webpack-dev-server": "^1.14.1"
},
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js",
  "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
  "build": "echo \"Build hasn't been specified yet\" && exit 1"
},

webpack.config.js

/*global require module __dirname*/
var path = require('path'),
    webpack = require('webpack'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    autoprefixer = require('autoprefixer'),
    precss = require('precss');

module.exports = {
    entry: [
    'webpack-dev-server/client?http://localhost:9090',
    'webpack/hot/only-dev-server',
    './entry.js'
  ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { 
                test: /\.css$/i,
                loaders: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1!postcss-loader')
            }
        ]
    },
    postcss: function() {
        return [precss, autoprefixer];
    },
    plugins: [
        // Set the name of the single CSS file here.
        new ExtractTextPlugin('main.css', { allChunks: true }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="/static/main.css" />
    </head>
    <body>
        <script src="http://localhost:9090/webpack-dev-server.js"></script>
        <script type="text/javascript" src="/static/bundle.js" charset="utf-8"></script>
    </body>
</html>

entry.js

require("./styles.css");
document.write(require("./content.js"));

styles.css

@import "body.css";

body {
     /*background: yellow; */
    font-size: 30px;
}

div {
    display: flex;
}

body.css

$color: yellow;

body {
    background: $color;
}

div {
    color: white;

    a {
        color: green;
    }
}

div {
    display: flex;
}

webpack postcss webpack-hmr webpack-dev-server reload
person mummybot    schedule 12.02.2016    source источник
comment
В качестве дополнительного примечания, если я использую HMR и сохраняю корневой файл styles.css, я получаю сообщение: Следующие модули не могут быть обновлены в горячем режиме: (Им потребуется полная перезагрузка!) И мне нужно обновить страницу. Если я не использую HMR, то он отлично обновляется, хотя и только при сохранении корневого файла styles.css.   -  person mummybot    schedule 12.02.2016

Ответы (1)


arrow_upward
5
arrow_downward

После долгих поисков в Интернете ответ можно найти в этих двух темах:

  1. https://github.com/postcss/postcss-loader/issues/8
  2. https://github.com/jonathantneal/precss/issues/6

Спасибо @zzq889 за следующий пример с использованием postcss-import, который обходится ограничение в postcss-partial-import:

var postcssImport = require('postcss-import');

...

postcss: function (webpack) {
    return [
        postcssImport({
            addDependencyTo: webpack
        })
    ];
}

Надеюсь, в будущем это будет работать только с precss и его зависимой библиотекой postcss-partial-import с этим pull request или решение на его основе.

person mummybot    schedule 12.02.2016