Как использовать scss с модулями css / postcss внутри компонентов

Question

Я не могу понять, как настроить мой веб-пакет, чтобы иметь возможность использовать модули scss внутри моих компонентов, например:

import styles from './ComponentStyles.scss'

До сих пор я пытался настроить веб-пакет для использования sass-loader рядом postcss-loader но не повезло

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

Обратите внимание, что https://github.com/kriasoft/isomorphic-style-loader - это библиотека, которую я использую вместо style-loader из-за требований рендеринга сервера, в своих документах github они фактически используют postcss-загрузчик с расширением.scss, но в моем случае 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"

Конфигурация веб-пакета

...
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 является точкой входа в веб-пакет, и путем импорта нашего scss файл (через относительный путь), мы говорим веб-пакету включить его во время процесса сборки.

Кроме того, так как мы указали loader для этого расширения файла в нашей конфигурации (.scss), webpack умеет анализировать style.scss и запустите его через определенные загрузчики справа налево: sass --> post-css --> css,

Затем мы используем extract-text-webpack-plugin вытащить скомпилированный CSS из bundle.jsгде он обычно находится, и поместите его вcss/bundle.css) относительно нашего выходного каталога.

Кроме того, используя extract-text-webpack-plugin здесь не является обязательным, поскольку он просто извлекает ваш CSS из bundle.js и помещает его в отдельный файл, что хорошо, если вы используете рендеринг на стороне сервера, но я также нашел его полезным во время отладки, так как у меня было определенное расположение вывода для scss Я был заинтересован в составлении.

Если вы хотите увидеть это в действии, вот небольшой пример, который использует его: https://github.com/mikechabot/react-boilerplate