关于前端:scss不能用除法

34次阅读

共计 1763 个字符,预计需要花费 5 分钟才能阅读完成。

之前在我的项目中就遇到过,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 语法书写形式十分相似。

正文完
 0