create-react-app с Sass не загружает стили

Я пытаюсь добавить поддержку sass/scss в create-react-app.

Итак, я сделал следующие шаги:

  1. npm eject
  2. npm install sass-loader node-sass --save-dev

  3. Opned в webpack.конфиг.разработка.файл JS и добавил Это в раздел погрузчики:

    {
    test: /.scss$/,
    loaders: ["style", "css", "sass"]
},

в моем приложении.JS-файл я ссылаюсь на файл scss:import './css/app.scss';

когда я запускаю npm start все компилируется без ошибок, но приложения без моделирование.

что я упустил?

8
create-react-app reactjs webpack

3 ответов

Я просто прошел через это, и кажется, что есть много людей потеряли или не найти правильный ответ. Вот что я сделал:--7-->

получить контроль над конфигурацией

npm run eject

запуск этой команды скопирует все файлы конфигурации и транзитивные зависимости (Webpack, Babel, ESLint и т. д.) Прямо в ваш проект, поскольку вы отметили все, что было внутри модуля npm под названием react-script. Не изменять этот пакет прямо!

установите компилятор sass и загрузчик webpack

npm install sass-loader node-sass --save-dev

на этом этапе вы должны установить компилятор sass и загрузчик webpack в качестве зависимостей разработки.

изменить конфигурацию webpack

  1. открыть config\webpack.config.dev.js.

  2. добавить /\.scss$/, для массива exclude в загрузчике url-адресов он будет выглядеть примерно так после обновления:

    exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.svg$/,
    /\.scss$/, //Add this line
],

  3. добавить Загрузчик SASS/SCSS:

    {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},
12

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass','scss']   //add 'scss'
},
0

стиль с использованием Sass без выброса

1) Установить Koala

Коала является sass, меньше и т. д.. компилятор. Для этого вы можете использовать любые инструменты по вашему выбору.

2) Добавьте папку src

добавьте исходную папку, содержащую все ваши файлы SCSS в Koala. Он будет отслеживать любые изменения в ваших файлах Sass и мгновенно генерировать скомпилированную версию CSS.

3) обратитесь к CSS-файлам

используйте CSS файл, созданный Koala непосредственно ваш проект.

import './style.css';
0