モジュールをビルドするときにCSSがWebpackでコンパイルされない

Question

私はreactes、es6、webpackを使用してdraftjsエディタモジュールを構築しています。それは正常に動作しますが、ビルドを実行すると、私のJSファイルはBabelによってコンパイルされますが、私のCSSはそうではありません。 これは私が私のモジュール内のCSSをインポートする方法である：ここでは

import '../styles.css'; 

は私webpack.configです：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    output: { 
    path: path.join(__dirname, 'lib'), 
    filename: 'drafty.js', 
    libraryTarget: 'commonjs2', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=drafty[local]__[hash:base64:5]!postcss-loader'), 
     }, 
    ], 
    }, 
    plugins: [ 
    new ExtractTextPlugin('drafty.css', { allChunks: true }) 
    ] 
}; 

私のCSSのグリッチ：

@import url(../node_modules/draft-js-linkify-plugin/lib/plugin.css); 
@import url(../node_modules/draft-js-emoji-plugin/lib/plugin.css); 
@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
} 

i { 
    font-family: 'Material Icons' !important; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    display: inline-block; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} //... and more stuff 

そしてここでは、私の依存関係であります（私が既にスタイルローダー、css-loader、postcss-loaderをインストールしているのを見てください）

"dependencies": { 
    "draft-js": "^0.9.1", 
    "draft-js-emoji-plugin": "^2.0.0-beta9", 
    "draft-js-export-html": "^0.5.2", 
    "draft-js-linkify-plugin": "^2.0.0-beta9", 
    "draft-js-plugins-editor": "^2.0.0-beta9", 
    "draftjs-utils": "^0.3.2", 
    "extract-text-webpack-plugin": "^1.0.1", 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.20.0", 
    "babel-eslint": "^7.1.1", 
    "babel-loader": "^6.2.9", 
    "babel-preset-stage-0": "^6.16.0", 
    "classnames": "^2.2.5", 
    "style-loader": "^0.13.1", 
    "css-loader": "^0.26.1", 
    "babel-plugin-react-transform": "^2.0.2", 
    "babel-plugin-transform-class-properties": "^6.19.0", 
    "babel-polyfill": "^6.20.0", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "eslint": "^3.12.1", 
    "eslint-config-airbnb": "^13.0.0", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-plugin-jsx-a11y": "2.2.3", 
    "eslint-plugin-react": "^6.8.0", 
    "rimraf": "^2.5.4", 
    "postcss-loader": "^1.2.1", 
    "webpack": "^1.14.0" 
    }, 
    "peerDependencies": { 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1" 
    } 

私のビルドコマンド：

WEBPACK_CONFIG=$(pwd)/webpack.config.js BABEL_DISABLE_CACHE=1 BABEL_ENV=production NODE_ENV=production ./node_modules/.bin/babel --out-dir='lib' src && clear 

ありがとうございました。

Answer 1

css-loaderに追加したcss-modulesの問題があると思います。あなたが本当にcss-modulesを使用したい場合は

次のことを試してみてください、

loaders: [ 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader'), 
     }, 
    ], 

、以下

import styles from '../style.css' 

... 
... 
return <div classname={styles.myClass}>Hello</div> 

は、このことができますよりおよそcss-moduleshere

希望をお読みください！