Как node/create-react-app подключает пакет npm sass?

Question

[devdev10111]

Привет!
Изучаю реакт и все что около, возник такой вопрос. Я развернул шаблон реакта через create-react-app. Далее мне понадобился sass синтаксис и я просто установил нужный пакет (npm install sass). И это чудо заработало без какой-либо настройки.

Сразу прошу прощения за глупые вопросы, но их несколько:
1. В интернете куча статей по подключению sass к реакту, через вебпак. Мне этого не нужно было делать, потому что я использовал create-react-app, в конфиге вебпака которого уже произведена настройка sass?
2. Если п1 верный, то как в таком случае это реализовано? Я ведь мог установить не sass, а node-sass или dart-sass или любую другую библиотеку?

Answer 1

[Daniel~]

Мне этого не нужно было делать, потому что я использовал create-react-app, в конфиге вебпака которого уже произведена настройка sass?

Да.

Если п1 верный, то как в таком случае это реализовано? Я ведь мог установить не sass, а node-sass или dart-sass или любую другую библиотеку?

Примерно так:

const fs = require("fs");

function modulesHasOneOf(moduleNames) {
  return moduleNames.some(name => {
    const modulePath = require.resolve(name);
    return fs.existsSync(modulePath);
  });
}

const isSassInstalled = modulesHasOneOf(["sass", "dart-sass", "node-sass"]);

const webpackConfig = {
  ...
  module: {
    rules: [
      {
         test: isSassInstalled ? /\.scss$/ : /\.css$/,
         use: ["css-loader", isSassInstalled && "sass-loader"].filter(Boolean)
      }
    ]
  }
};

UPD:
Все оказалось проще:

const config = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["css-loader"]
        },
        {
          test: /\.s(a|c)ss$/,
          use: ["css-loader", "sass-loader"]
        }
      ]
    }
  };

И уже в зависимости от расширения файла выбирает то или иное правило. Главное, да, просто поставить пакет (dart-,node-)sass.

https://github.com/facebook/create-react-app/blob/...

Comments

[devdev10111]

спасибо за ответ! подскажи, ты пример взял из cra или это абстрактный пример?

[Daniel~]

devdev10111, абстрактный. Это то, как я бы это реализовывал на первый взгляд

[Daniel~]

devdev10111, слушайте, там все проще оказалось

const config = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["css-loader"]
        },
        {
          test: /\.s(a|c)ss$/,
          use: ["css-loader", "sass-loader"]
        }
      ]
    }
  };

И уже в зависимости от расширения файла выбирает то или иное правило

https://github.com/facebook/create-react-app/blob/...

[devdev10111]

Daniel~, да, действительно) спасибо