我曾经能够在Webpack开发服务器上使用styled-components而没有任何问题，但当使用webpack -p --progress --colors进行构建项目以用于生产环境或者运行webpack -d --progress --colors --watch时，样式并没有被添加。
唯一在生产环境中添加的样式是空样式。
<style data-styled="" data-styled-version="4.4.1"></style>
在 webpack.config.js 中，我有以下规则，适用于开发和生产环境：
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
},
]
},
插件注意，debug用于判断是否为生产构建
plugins: debug ? [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template.html')
})
] : [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
new CleanWebpackPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template.html')
})
],
开发服务器设置：
devServer: {
contentBase: BUILD_DIR,
historyApiFallback: true,
watchContentBase: true,
port: 9000
},
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties', 'babel-plugin-styled-components']中添加了它，但仍然无法正常工作。 - pabloBarwebpack -d --progress --colors --watch中无法工作，只能在 webpack dev server 中工作。 - pabloBar