0
我不能使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;
}The content of styles.css中的ErrorMessage成分是：
.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。