1

でうまくいきませExtractTextPluginんcss-loader。実行すると、次のエラーが表示されますwebpack -p。

ERROR in ./node_modules/css-loader!./app/components/ErrorMessage/styles.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".container", ".container" is weird

私のプロジェクトの構造は次のようになります。

 app
 |---assets
 |     '---styles
 |           '--- styles.css  
 |---components
 |       '---ErrorMessage
 |                |--- index.js
 |                '--- styles.css
 |---scenes
 |
 .babelrc
 .eslintrc
 package.json
 webpack.config.babel.js

私のグローバルstyles.cssの内容は次のとおりです。

.centerDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

styles.cssErrorMessage コンポーネントの内容は次のとおりです。

.container {
  composes: centerDiv from 'assets/styles/styles.css';
}

これが私のwebpack構成です：

import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'dist'),
}

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: PATHS.app + '/index.html',
  filename: 'index.html',
  inject: 'body'
})

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
})

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  resolve: {
    modules: [path.resolve('./app'), 'node_modules']
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    contentBase: PATHS.build,
    hot: true,
    inline: true,
  },
  plugins: [HTMLWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.css$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
      {test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/, loader: 'url-loader'},
    ]
  },
}

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [HTMLWebpackPluginConfig, productionPlugin, new ExtractTextPlugin('styles.css')],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        })
      },
      {test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/, loader: 'url-loader'},
    ]
  },
}

export default Object.assign({}, base, isProduction === true ? productionConfig : developmentConfig)

私は何を間違っていますか？私が使用しない場合、composesすべてがうまく抽出されます。コードが開発モードで実行されている場合はエラーが発生しないことに注意してください。これは構成に関係していると思いExtractTextPluginます。webpack v3、node v8.4.0、およびを使用してextract-text-webpack-plugin v3.0.0います。

4

1 に答える 1