当我构建我的模块时，CSS 没有在 Webpack 中编译答案

【问题标题】：CSS aren't compiled in Webpack when I build my module当我构建我的模块时，CSS 没有在 Webpack 中编译
【发布时间】：2017-05-02 12:24:24
【问题描述】：

我正在使用 react、es6 和 webpack 构建一个 Draftjs 编辑器模块。它工作得很好，但是当我运行构建时，我得到了由 Babel 编译的所有 JS 文件，好的，但是我的 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

这是我的依赖项（看到我已经安装了 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

谢谢。

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

我猜问题出在你添加到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

希望这会有所帮助！

【讨论】：

谢谢。奇迹般有效。 :)