1

我正在使用 babel-plugin-react-css-modules，它似乎正在创建 className/styleName，但由于某种原因，它没有输出 CSS，以便模块可以读取它。

这是我的应用程序：启动板

我正在使用 webpack 4.2.0/React 16 并在从单独的配置文件导入的 webpack.config 中使用 babel 配置，因为您无法在 .babelrc 中设置上下文。

这是 babel 配置：

    {
      loader: 'babel-loader',
       options: {
        'plugins': [
           'react-hot-loader/babel',
           'transform-runtime',
           'transform-object-rest-spread',
           'transform-class-properties',
           ['react-css-modules',
            {
              context: paths.javascript,
              'generateScopedName': '[name]__[local]___[hash:base64:5]',
              'filetypes': {
                '.scss': {
                  'syntax': 'postcss-scss',
                  'plugins': ['postcss-nested']
                }
               },
              'exclude': 'node_modules',
              'webpackHotModuleReloading': true
            }
          ]
        ],
        'presets': [
          'env',
          'react',
          'flow'
        ],
        'env': {
          'production': {
            'presets': ['react-optimize']
          }
        }
      }
    }

这是我的 webpack：

const webpack = require('webpack')
const path = require('path')

const paths = require('./webpack/config').paths
const outputFiles = require('./webpack/config').outputFiles
const rules = require('./webpack/config').rules
const plugins = require('./webpack/config').plugins
const resolve = require('./webpack/config').resolve
const IS_PRODUCTION = require('./webpack/config').IS_PRODUCTION
const IS_DEVELOPMENT = require('./webpack/config').IS_DEVELOPMENT

const devServer = require('./webpack/dev-server').devServer

const DashboardPlugin = require('webpack-dashboard/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// Default client app entry file
const entry = [
  'bootstrap-loader/extractStyles',
  path.join(paths.javascript, 'index.js')
]

plugins.push(
  // Creates vendor chunk from modules coming from node_modules folder
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: outputFiles.vendor,
    minChunks (module) {
      const context = module.context
      return context && context.indexOf('node_modules') >= 0
    }
  }),
  // Builds index.html from template
  new HtmlWebpackPlugin({
    template: path.join(paths.source, 'index.html'),
    path: paths.build,
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true,
      removeComments: true,
      useShortDoctype: true
    }
  })
)

if (IS_DEVELOPMENT) {
  // Development plugins
  plugins.push(
    // Enables HMR
    new webpack.HotModuleReplacementPlugin(),
    // Don't emmit build when there was an error while compiling
    // No assets are emitted that include errors
    new webpack.NoEmitOnErrorsPlugin(),
    // Webpack dashboard plugin
    new DashboardPlugin()
  )

  // In development we add 'react-hot-loader' for .js/.jsx files
  // Check rules in config.js
  rules[0].use.unshift('react-hot-loader/webpack')
  entry.unshift('react-hot-loader/patch')
}

// Webpack config
module.exports = {
  devtool: IS_PRODUCTION ? false : 'eval-source-map',
  context: paths.javascript,
  watch: IS_DEVELOPMENT,
  entry,
  output: {
    path: paths.build,
    publicPath: '/',
    filename: outputFiles.client
  },
  module: {
    rules
  },
  resolve,
  plugins,
  devServer
}

如果你运行npm start或者yarn start代码会编译运行，你可以看到一个基本的应用布局。如果您检查反应代码，您将看到样式名称反映在组件中。没有发生的是样式没有被输出。我似乎无法弄清楚为什么。

任何帮助表示赞赏。

4

0 回答 0