Question

我无法让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;
}

ErrorMessage组件中styles.css的内容为：

.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。

Answer 1

所以我想出了ExtractTextPlugin和webpack版本的完美结合。 webpack v1.15.0和extract-text-webpack-plugin v1.0.1。您可以在此处查看我的配置：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/609

错误：仅当selector为single时才允许组合：本地类名

1 个答案: