Webpack不加載css

這是我第一次嘗試設置Webpack，所以我確信我在這裏錯過了一些東西。Webpack不加載css

我想用Webpack加載我的PostCSS文件，使用ExtractTextPlugin生成一個CSS文件到「dist」。問題是Webpack似乎沒有拿起css文件。他們在「客戶端/樣式」下，但我嘗試將它們移動到「共享」，結果相同。

我運行了帶有--display-modules選項的Webpack，並確認沒有css文件顯示在那裏。

我試過運行它沒有提取文本插件，結果是一樣的：沒有CSS內置到bundle.js中。

這裏是我的督促配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    entry: [ 
    './client' 
    ], 
    resolve: { 
    modulesDirectories: ['node_modules', 'shared'], 
    extensions: ['', '.js', '.jsx', '.css'] 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    chunkFilename: '[id].js', 
    publicPath: '/' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['babel'] 
     }, 

     { 
     test: /\.css?$/, 
     loader: ExtractTextPlugin.extract(
      'style-loader', 
      'css-loader!postcss-loader' 
     ), 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('[name].css') 
    ], 
    postcss: (webpack) => [ 
    require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }), 
    require('postcss-url')(), 
    require('precss')(), 
    require('postcss-fontpath')(), 
    require('autoprefixer')({ browsers: [ 'last 2 versions' ] }) 
    ] 
};

這是我的主CSS文件的例子： @import 'normalize.css /正常化';

/* Variables */ 
@import 'variables/colours'; 

/* Mixins */ 

/* App */ 

/* Components */ 

body { 
    background-color: $black; 
}

有沒有人有一個想法，爲什麼發生這種情況？我錯過了什麼嗎？

謝謝

來源

2016-01-23 Claudia

由於您使用的是style-loader和css-loader。你可以在js文件中包含css。您可以在正在使用樣式的JavaScript文件中使用require(style.css)或import(if es6) css文件。無需爲css提供webpack的入口點。

希望它有幫助。

來源

2016-01-23 13:00:57 sandeep

謝謝你的提示。 :)在我的情況下，我正在處理一個同構的應用程序，所以我需要在JS之前加載樣式，否則會出現FOUC。但是，請記住其他情況。 – Claudia

然後使用'isomorphic style loader'來解決FOUC問題。它是同構應用程序的樣式加載器的擴展。 – sandeep

會不會，謝謝！ – Claudia

所以，3小時逼進牆角。我的頭，我終於得到了它。我希望這將有助於未來的人。

我所需要做的就是將'./client/styles/main.css'添加到入口點。 Yey。

來源

2016-01-23 12:27:23 Claudia

謝謝！我在找到你之前浪費了幾個小時！ –

Webpack不加載css

回答

相關問題