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

Question

我无法弄清楚如何设置我的 webpack 以便能够在我的组件中使用 scss 模块，例如：

import styles from './ComponentStyles.scss'

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

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

注意 isomorphic-style-loader 是我使用的库，而不是 style-loader 由于服务器渲染要求，在其 github 页面文档中，他们实际上使用带有 .scss 扩展名的 postcss-loader，但是在我的例子中，如果我按照他们的例子，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 在构建期间包含它过程。

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

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

此外，在这里使用 extract-text-webpack-plugin 是可选的，因为它会简单地从 bundle.js 中提取您的 CSS 并将其放入一个单独的文件中，如果您使用 server-侧渲染，但我也发现它在调试过程中很有用，因为我有一个特定的输出位置 scss 我有兴趣编译。

如果您希望看到实际效果，这里有一个使用它的小样板：https://github.com/mikechabot/react-boilerplate

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

How to use scss with css modules / postcss inside components

javascript

reactjs

webpack

postcss

css-modules