0
でExtractTextPluginを動作させることはできません。私は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を使用しています。