SCSS can’t use division?

I’ve encountered it in the project before. SCSS is not a division problem. At that time, the project was busy and didn’t deal with it in time, but there has always been a thorn in my heart. I’m upset like Zhang Ailing’s red rose. Now I want to pull out this thorn when I have time

Wrong location

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

Click into the officialSolution

There are two kinds, one is reference@use "sass:math";, usemath.div(100%, 24)The other is global downloadsass-migratorConvert the target file

I checked it online, bootstrapChicken thief, I changed my mind and replaced it with multiplication. See the detailscode。 However, we should also encounter the situation that division must be used. From the perspective of PR, we don’t see the scene that division must be used. It’s a pity

Forget it, check it again and find that sass with specified binding can be used. It was written by a Japaneseprogramme。 So there are about three ways to solve it

First use the first method to solve it. Indeed, there is no error in the development environment, but in build, there is no errorError: Invalid CSS after "...ion-delay: math"

The second and third are not easy to use

PS: I need to criticize myself here. If I read the wrong information in the newspaper, I know that I used node sass. Node sass does not support this writing method, but I didn’t seriously read the wrong information at that time and went directly to Google

Another way of thinking

My project is developed based on UMI. I use SCSS because its plug-ins are installed:@umijs/plugin-sass

my@umijs/plugin-sassIt has been upgraded to the latest version, that is, dart sass is used. Is there a problem with dart sass?

While looking around, I foundThis article, that’s it

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

Translated as

This is because you need to usesassinstead ofnode-sass. deletenode-sassAnd usesass, this error should disappear.

My approach

Directly upgrade the whole project, and

npm update

Then delete itpackage.jsonMediumnode-sass(the original self hurt himself)

Then delete the wholenode_modules, and then download again

rm -rf node_modules
yarn

As a result, it solved a heart stab

@Interpretation of umijs / plugin sass source code

When looking for problems, I looked at the source code of @ umijs / plugin sass and posted it

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 unfamiliar with webpack, the following statement is not referential

• api.describeDon’t you understand?
• api.chainWebpackThis paragraph is probably some writing of the rules of webpack, that is, it is written in sass

Supplement the front-end engineering series in the follow-up study

Extended reading

Sass is a CSS preprocessing language written in Ruby language

Sass and SCSS are actually the same thing. We usually call them sass. There are two main differences between them:

1. The file extension is different. Sass takes “. Sass” suffix as the extension, while SCSS takes “. SCSS” suffix as the extension.
2. The grammar is written in different ways. Sass is written in strict indented grammar rules without braces ({}) and semicolons (;), The syntax writing of SCSS is very similar to our CSS syntax writing.