如何在组件内部使用css模块/ postcss

Question

我想不出如何设置webpack，以便能够在组件中使用scss模块，如下所示：

import styles from './ComponentStyles.scss'

到目前为止，我尝试将webpack配置为与postcss-loader一起使用postcss-loader，但没有成功：

  {
    test: /\.scss$/,
    loaders: [
      'isomorphic-style-loader',
      'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]',
      'postcss-loader',
      'scss-loader'
    ]
  }

注意，由于服务器呈现需求，同构式装载机是我使用的库而不是style-loader，在其github页面文档中，它们实际上使用带有.scss扩展的postcss加载程序，但在我的示例中，scss没有被编译。

Answer 1

我不得不自己修修补补，但最终还是碰到了以下情况：

package.json

"autoprefixer": "^6.3.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.8.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0"

webpack配置

...
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
...

const config = {
    ...
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    plugins: [
        new ExtractTextPlugin('css/bundle.css'),
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
            }
        ]
    }
    ...
};

bootstrap.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import style from './scss/style.scss';

ReactDOM.render(
    <App/>,
    document.getElementById('my-app')
);

对于那些感兴趣的人:这里发生的是bootstrap.jsx是webpack入口点，通过导入我们的原始scss文件(通过相对路径)，我们告诉webpack在构建过程中包含它。

另外，由于我们在配置(.scss)中为这个文件扩展名指定了一个.scss，webpack能够解析style.scss并通过定义的加载器从右到左运行：sass --> post-css --> css。

然后，我们使用extract-text-webpack-plugin从bundle.js (它通常驻留的位置)中取出编译的CSS，并将其放置在相对于输出目录的位置(css/bundle.css)中。

此外，在这里使用extract-text-webpack-plugin也是可选的，因为它将从bundle.js中提取CSS并将其放置在一个单独的文件中，如果您使用服务器端呈现，这是很好的，但我发现它在调试过程中也很有帮助，因为我对bundle.js有一个特定的输出位置，我对编译感兴趣。

如果你想看到它的作用，这里有一个使用它的小样板：https://github.com/mikechabot/react-boilerplate