在 Create React App 中啓用 Sass 和 Less

本文介紹瞭如何在 Create React App 腳手架中啓用 Sass 和 Less。

前言

關於建立 create-react-app 項目請查看： create-react-app 的安裝與建立。

關於在 less 和 sass 如何在 create-react-app 啓用 CSS Modules，請查看個人上一篇文章：在 Create React App 中使用 CSS Modules。

---

啓用 Sass 語法編寫 CSS

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; 複製代碼

在瀏覽器中查看效果

運行項目，此時在瀏覽器中便可查看到 logo 圖片在緩慢轉動。

---

啓用 Less 語法編寫 CSS

因爲 create-react-app 腳手架中並無配置關於 less 文件的解析，因此咱們須要本身進行配置。須要安裝的插件 less， less-loader。

添加 Less 相關配置

• 在命令行運行 npm run eject 命令

  此命令會將腳手架中隱藏的配置都展現出來，此過程不可逆

• 運行完成以後，打開 config 目錄下的 webpack.config.js 文件，找到 // style files regexes 註釋位置，仿照其解析 sass 的規則，在下面添加兩行代碼

  // 添加 less 解析規則
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  複製代碼

• 找到 rules 屬性配置，在其中添加 less 解析配置

  !!!注意： 這裏有一個須要注意的地方，下面的這些 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 用法中的文件進行修改

編寫 less 文件：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; 複製代碼

在瀏覽器中查看效果

運行項目，此時在瀏覽器中便可查看到 logo 圖片在緩慢轉動。

---

再次提醒

配置的時候請注意：關於 less 配置規則放在 sass 的解析規則下面便可，若是放在了 file-loader 的解析規則下面，less 文件解析不會生效。