當我構建模塊時，CSS不會編譯到Webpack中

我正在使用react，es6和webpack構建一個draftjs編輯器模塊。它工作正常，但是當我運行構建時，我得到了由Babel編譯的所有JS文件，但是，我的CSS沒有。這是我如何導入我的模塊內的CSS：當我構建模塊時，CSS不會編譯到Webpack中

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

這裏是我的依賴（請參閱我已經安裝了style-loader，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

謝謝。

來源

2016-12-16 MattGA

我想問題是你已經添加到你的css-loader的css-modules。

嘗試以下，

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

如果你真的想用css-modules，請執行下列操作

import styles from '../style.css' 

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

瞭解更多關於css-moduleshere

希望這有助於！

來源

2016-12-16 19:11:23

謝謝。奇蹟般有效。 :) – MattGA

當我構建模塊時，CSS不會編譯到Webpack中

回答

相關問題