scss不能用除法?

山頭人漢波發表於2022-04-28
CSS

之前在專案中就遇到過，scss 不是用除法的問題，當時專案忙，沒有及時處理，但心裡一直有一根刺，像張愛玲的紅玫瑰一樣鬧的我心煩，現在有時間就想拔掉這根刺

錯誤定位

因為執行專案後，用到除法，提示錯誤為

scss警告不能除法

點進官方的解決方案

有兩種，一種是引用 @use "sass:math";，使用 math.div(100%, 24) 這類寫法，另一種是全域性下載sass-migrator 對目標檔案進行轉換

網上查了一番， bootstrap 雞賊，換了個思路，用乘法代替，具體可看程式碼。但也應該會遇到必須使用除法的情況，從 PR 上看，沒有看到必須用除法的場景，可惜一番

算了，再去查一番，發現用指定繫結的 sass 可以，是個日本佬寫的方案 。所以大概三種方法解決

先用第一種方法解決，確實，在開發環境上不報錯了，但是在 build 時，報 Error: Invalid CSS after "...ion-delay: math"

報錯資訊

第二種、第三種都不好使

PS：這裡要批評一下自己，看報錯資訊就知道使用到了 node-sass，node-sass 不支援這種寫法，但是當時自己沒認真看報錯資訊，直接去 Google 了

換種思路

我的專案是基於 umi 開發，用 scss 是因為安裝了它的外掛：@umijs/plugin-sass

umijs/plugin-sass文件

我的 @umijs/plugin-sass 已經升級到最新版本，也就是說使用到了 Dart Sass，難道 Dart Sass 的問題？

在胡亂找的時候，發現了這篇文章 ，解惑了

This is because you need to use sass instead of node-sass. Remove node-sass and use sass instead and this error should go away

翻譯過來就是

這是因為您需要使用sass而不是node-sass. 刪除node-sass並使用sass，此錯誤應該消失。

我的做法

直接升級整個專案，粗暴

npm update

接著刪掉 package.json 中的 node-sass（當初的自己害了自己）

再接著刪掉整個 node_modules，再重新下載

rm -rf node_modules
yarn

結果通了，這樣解決了一個心頭刺

@umijs/plugin-sass 原始碼解讀

在找問題的時候看了下 @umijs/plugin-sass 的原始碼，貼出來看一下

import { IApi, utils } from 'umi'

export default (api: IApi) => {
  api.describe({
    config: {
      schema(Joi) {
        return Joi.object({
          implementation: Joi.any(),
          sassOptions: Joi.object(),
          prependData: Joi.alternatives(Joi.string(), Joi.func()),
          sourceMap: Joi.boolean(),
          webpackImporter: Joi.boolean(),
        })
      },
    },
  })

  api.chainWebpack((memo, { createCSSRule }) => {
    createCSSRule({
      lang: 'sass',
      test: /\.(sass|scss)(\?.*)?$/,
      loader: require.resolve('sass-loader'),
      options: utils.deepmerge(
        {
          implementation: require('sass'),
        },
        api.config.sass || {},
      ),
    })
    return memo
  })
}

介於對 webpack 的不熟悉，下面的說法不帶有參考性

  • api.describe 不懂
  • api.chainWebpack 這段大概是對 webpack 的規則的一些寫入，即是用 sass 寫法

後續學習前端工程化系列的時候再對其做補充

擴充套件閱讀

Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言

Sass 和 Scss 其實就是同一種東西，我們平時都稱之為 Sass，兩者不同之處主要有兩點：

  1. 副檔名不同，Sass 是以“.sass”字尾為副檔名，而 Scss 是以“.scss”字尾為副檔名。
  2. 語法書寫方式不同，Sass 是以嚴格的縮排式語法規則來書寫，不帶大括號({})和分號(;)，而 Scss 的語法書寫和我們的 CSS 語法書寫方式非常類似。

相關文章