Как отредактировать веб-пакет для использования SCSS в приложении React?

Question

Я создал новое приложение React с помощью create-Reaction-app (используя React ver. 16.6.3).Теперь я хочу использовать SCSS для своих компонентов.Итак, сначала я запустил скрипт извлечения.Затем в webpack.config.dev.js я сделал следующее редактирование:

{
   test: cssRegex,
   exclude: cssModuleRegex,
   use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }),
}

Я также установил пакет node-sass.

Затем я создал свой тестовый файл .scss:

.Test {
  background-color: gold;
  .Header {
    color: lighten(purple, 20%);
  }
}

И мой тестовый компонент с импортом файла .scss

import React from 'react';
import style from './test.scss';

const Test = (props) => (
  <div className={style.Test}>
    This is div1
    <div className={style.Header}>Div 2</div>
  </div>
);

export default Test;

Это не сработало, и я не увидел стилей.Я попытался импортировать .scss напрямую и использовать его:

import './test.scss';

...
<div className='Test'>
  This is div1
  <div className={style.Header}>Div 2</div>
</div>
...

Это сработало, и я увидел стиль в div с className = 'Test'.

Я попытался изменитьВеб-пакет выглядит следующим образом:

const CSSModuleLoader = {
  loader: 'css-loader',
  options: {
    modules: true,
    sourceMap: true,
    localIdentName: '[local]__[hash:base64:5]',
    minimize: true
  }
}

const CSSLoader = {
  loader: 'css-loader',
  options: {
    modules: false,
    sourceMap: true,
minimize: true
  }
}

const postCSSLoader = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    sourceMap: true,
    plugins: () => [
      autoprefixer({
        browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
      })
    ]
  }
}

...

{
  test: /\.scss$/,
  exclude: /\.module\.scss$/,
  use: ['style-loader', CSSLoader, postCSSLoader, 'sass-loader']
},
{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    CSSModuleLoader,
    postCSSLoader,
    'sass-loader',
  ]
},

Сначала я получил ошибку autoprefixer not defined.Я импортировал его с const autoprefixer = require('style-loader') - это привело к исчезновению этой ошибки, хотя я все еще не уверен, что это было правильное требование и правильное исправление.

Но затем я получил следующую ошибку:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module.rules[2].oneOf[0].use should be one of these: non-empty string | function | object { loader?, options?, ident?, query? } | function | [non-empty string | function | object { loader?, options?, ident?, query? }] -> Modifiers applied to the module when rule is matched Details: * configuration.module.rules[2].oneOf[0].use should be a string. * configuration.module.rules[2].oneOf[0].use should be an instance of function * configuration.module.rules[2].oneOf[0].use should be an object. * configuration.module.rules[2].oneOf[0].use should be an instance of function * configuration.module.rules[2].oneOf[0].use[1] should be a string. * configuration.module.rules[2].oneOf[0].use[1] should be an instance of function * configuration.module.rules[2].oneOf[0].use[1] has an unknown property 'loaders'. These properties are valid: object { loader?, options?, ident?, query? }

Не знаю, как с этим справиться ...

Как настроить веб-пакет для немедленной компиляции .scss в .css в том же каталоге (таким образом, я могуимпортировать .css и использовать его регулярно с style.Class) или использовать импорт .scss в моем файле таким же образом, а затем скомпилировать его в .css для производства?

Answer 1

Пожалуйста, используйте приведенные ниже правила в файле веб-пакета и удалите дополнительный код.

rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]