Can't use division in scss?

I have encountered it in the project before, scss is not a problem of division. At that time, the project was busy and I didn't deal with it in time, but there was always a thorn in my heart. I was upset like Zhang Ailing's red rose, and now I have time to unplug it. thorn

wrong location

Because after running the project, the division is used, and the prompt error is

Click on the official solution

There are two kinds, one is to reference @use "sass:math"; , use math.div(100%, 24) this type of writing, the other is to download the target file globally sass-migrator

I checked the Internet, and the bootstrap chicken thief changed the idea and replaced it with multiplication. See the code for details. But there should also be cases where division must be used. From the PR point of view, I have not seen a scene where division must be used. It is a pity.

Forget it, go check it out again, and find that you can use the specified binding sass, which is a plan written by a Japanese guy. So there are about three ways to solve it

First use the first method to solve it. Indeed, no error is reported in the development environment, but when building, it reports Error: Invalid CSS after "...ion-delay: math"

The second and third are not good

PS: I have to criticize myself here. You can see that you have used node-sass by looking at the error message. Node-sass does not support this way of writing, but at that time, I didn’t read the error message seriously and went directly to Google.

another way of thinking

My project is developed based on umi, and I use scss because its plugin is installed: @umijs/plugin-sass

Mine @umijs/plugin-sass has been upgraded to the latest version, which means I have used Dart Sass. Is it a problem with Dart Sass?

When I was looking for it, I found this article and solved my confusion.

Because you need to IS the this use sass of node-sass . The Remove node-sass and use sass and the this error Should Go Away

translate it to

This is because you need to use sass instead of node-sass . Remove node-sass and use sass .

my approach

Directly upgrade the entire project, rude

 npm update

Then delete package.json in node-sass (the original self harmed himself)

Then delete the entire node_modules and download it again

 rm -rf node_modules
yarn

The result is passed, this solves a heart sting

Source code interpretation of @umijs/plugin-sass

When looking for a problem, I looked at the source code of @umijs/plugin-sass and posted it to have a look

 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
  })
}

Due to the unfamiliarity with webpack, the following statement is not for reference

• api.describe do not understand
• api.chainWebpack This paragraph is probably some writing of the rules of webpack, that is, written in sass

I will supplement it when I learn the front-end engineering series later.

Extended reading

Sass is a CSS preprocessing language written in Ruby

Sass and Scss are actually the same thing. We usually call it Sass. There are two main differences between the two:

1. The file extension is different. Sass has the extension ".sass", while Scss has the extension ".scss".
2. The grammar is different. Sass is written with strict indentation grammar rules without curly brackets ({}) and semicolons (;), while the grammar of Scss is very similar to our CSS grammar.