这是我第一次尝试设置Webpack,所以我肯定错过了些什么。
我正在尝试使用ExtractTextPlugin将我的PostCSS文件加载到Webpack中,并生成一个CSS文件到“dist”文件夹。问题是Webpack似乎没有捕捉到CSS文件。它们在“client/styles”下,但我已经尝试将它们移到“shared”,结果依然相同。
我运行了带有--display-modules选项的Webpack,并验证没有CSS文件显示在其中。
我已经尝试过不使用extract text插件运行它,结果仍然一样:没有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/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
有人知道为什么会发生这种情况吗?是我漏掉了什么吗?
谢谢
同构样式加载器
,它可以解决FOUC问题。它是用于同构应用程序的样式加载器的扩展。 - sandeep