Webpack和Precss不會在@import文件上重新載入

我正在設置一個基本的Webpack安裝，並希望使用PostCSS和PreCSS插件在@imported文件中自動瀏覽器重新載入預處理的CSS。目前，如果我修改並保存@imported文件，瀏覽器不刷新（下例中的body.css）。如果我然後保存根引用的CSS文件（styles.css），則瀏覽器刷新並且還反映對@imported文件所做的任何更改。Webpack和Precss不會在@import文件上重新載入

我嘗試過使用可配置的webpack-dev-server，並使用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並保存根styles.css，我會收到以下消息：以下模塊不能熱更新:(他們需要完全重新加載！），我必須刷新頁面。如果我不使用HMR，那麼它只會在保存根styles.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文件上重新載入

回答

相關問題