关于前端: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 曾经降级到最新版本，也就是说应用到了 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 语法书写形式十分相似。