在 Create React App 中啟用 Sass 和 Less

暖生發表於2019-01-15
ReactAPP

本文介紹瞭如何在 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 解析配置
{
    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 圖片在緩慢轉動。

相關文章