реагировать стилизованные компоненты, не работающие в производстве

Question

Мне удалось без проблем работать со стилевыми компонентами на сервере webpack, но стили не добавляются при сборке проекта для производства с 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'],
       }
     },
    ]

} ,

Плагины, обратите внимание, что отладка используется, если используется производственная сборка

 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')
    })
  ],

Настройки сервера dev:

devServer: {
    contentBase: BUILD_DIR,
    historyApiFallback: true,
    watchContentBase: true,
    port: 9000
  },

Answer 1

у вас есть глобальный стиль, созданный с помощью createGlobalStyle, который содержит css @import? Удаление импорта с моего сайта просто исправило проблему для меня. (звучит как та же проблема).

https://github.com/styled-components/styled-components/issues/2911#issuecomment -592012166