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

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

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

Есть ли способ иметь webpack смотреть файлы @imported 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; 
}

источник

2016-02-12 mummybot

В качестве дополнительного примечания, если я использую HMR и сохраняю root styles.css, я получаю сообщение: Следующие модули не могут быть горячими обновлены: (Им потребуется полная перезагрузка!), И мне нужно обновить страницу , Если я не использую HMR, то он обновляется отлично, но только при сохранении корневых стилей.css. – mummybot

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

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

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

... 

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

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

источник

2016-02-12 11:50:55 mummybot

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

ответ

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