Включите Sass и Less в приложении Create React

React.js

В этой статье объясняется, как включить Sass и Less в шаблоне Create React App.

предисловие

Для создания проекта create-реагировать-приложение см.:Установка и создание приложения create-реагировать.

Посмотрите мой последний пост о том, как включить CSS-модули в create-react-app в less и sass:Используйте модули CSS в приложении React Create.

Пишите CSS с включенным синтаксисом Sass

В скаффолдинг create-react-app добавлена ​​поддержка sass-loader, поэтому просто установите плагин node-sass.

Установите плагин node-sass

$ npm install node-sass --save

# 或者
# $ yarn add node-sass

Применение:

Напишите файл sass: App.scss

.App {
  text-align: center;
  &-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
  }
}

Используйте непосредственно в файле js: перепишите файл App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
    );
  }
}

export default App;

Посмотреть эффект в браузере

Запустите проект, и вы увидите, что изображение логотипа медленно вращается в браузере.

Написание CSS с включенным синтаксисом Less

Поскольку парсинг меньшего количества файлов не настроен в скаффолдинге create-react-app, нам нужно настроить его самостоятельно. Плагины, которые необходимо установитьless,less-loader.

Добавить менее связанную конфигурацию

  • запустить в командной строкеnpm run ejectЗаказ

    Эта команда отобразит все скрытые конфигурации в скаффолдинге, этот процесс необратим.

  • После запуска откройте файл webpack.config.js в каталоге конфигурации и найдите// style files regexesПрокомментируйте локацию, следуйте правилам парсинга sass, добавьте две строчки кода ниже

    // 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

  • Найдите конфигурацию атрибута rules и добавьте к ней конфигурацию меньшего парсинга.

    !!!Уведомление:Здесь необходимо отметить следующееlessПравила конфигурации находятся вsassПравила парсинга можно ниже, если разместитьfile-loaderНиже правила парсинга,lessРазбор файла не будет работать.

    // Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
},

  • На этом настройка завершена, и вы можете установить плагины less и less-loader.

    $ npm install less less-loader --save

Применение

Следующий код изменен из файла при использовании sass выше

Запись меньшего файла: App.less

.App {
  text-align: center;
  &-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
  }
}

Используйте непосредственно в файле js: перепишите файл App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.less';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
    );
  }
}

export default App;

Посмотреть эффект в браузере

Запустите проект, и вы увидите, что изображение логотипа медленно вращается в браузере.

Напомнить еще раз

Обратите внимание при настройке: оlessПравила конфигурации находятся вsassПравила парсинга можно ниже, если разместитьfile-loaderНиже правила парсинга,lessРазбор файла не будет работать.

Категории