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 все компилируется без ошибок, но приложения без моделирование.

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

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']
    },
    

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

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

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

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

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

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

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

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

import './style.css';