Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

During the development process of the company these two days, I always encountered the problem of SASS, and there were two problems every time. I had a headache for one day, and finally I solved it, so I would like to share it with you. I hope you can work it out the next time you encounter it. Don’t be like me. Three questions for a day. Really is a cup of tea, a bug change a day.

First question: Reporting for Division is deprecated and will be removed in Dart Sass 2.0.0.

Bug back

SCSS file, used to define CSS variables. When all is ready, the following error is reported after running the project. It affects not only local execution, but also online packaging, so it must be resolved.

: Using / for division is deprecated and will be removed in Dart Sass 2.0. 0.

Recommendation: math.div($grid-gutter, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
63 │     'md': $grid-gutter / 3, │ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ╵ node_modules/vuetify/SRC/styles/Settings / _variables SCSS63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet
    
Copy the code

The solution

It was found to be a version problem, so we just need to modify “sass”: “~1.32.6” in package.json file. There was a catch, though, because at first I thought it would be okay to install Node-sass, but I was wrong and ended up reinstalling Sass.

{
    "sass": "~ 1.32.6"
}
Copy the code

SassError: Undefined mixin. Locate it at @include XXXXXX

Bug back

Vue cli3.0 project reference public file mixed style, ready to do the theme switch function, in vue.config.js public CSS property after running error: SassError: Undefined mixin. Locate at @include XXXXXX; It just doesn’t work

Configuration code:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/mixin.scss"; `}}}}Copy the code

An error code

@include background-color('text-activeColor'); ^ Undefined mixins. ╷173│ @ include font_color ('text-activeColor'); │ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^Copy the code

The solution

Read the configuration instructions on sASS official website and know the solution. Old sASS uses data: @import “@/assets/ CSS /mixin.scss”; The new version of sASS uses prependData: @import “@/assets/ CSS /mixin.scss”; . I just changed sass to the old version above, so I need to change prependData to Data

Problem 3: The /deep/ depth selector was used, but the vUE compiler failed

Bug back

– using /deep/ to change ele. me component styles will not work and will cause errors. Let’s see what the error message looks like:

Van-tabs --line, ^ Expected selector. ╷274│ │ /deep/. Van-tabs__content. Van-tabs__content --animated, │ ^ ╵ stdin274:3  root stylesheet
      in F:\web\project-a\src\views\RankingList.vue (line 274, column 3)
Copy the code

The solution

There are two solutions to this problem, replace /deep/ with these two, the first is: >>>. The second is :: : V-deep. However, it is important to note that if you use >>>, it may also run error, so the best solution is :: V-deep.

That’s all for today’s question. If you think it’s helpful, please give me a thumbs up. Thank you. If you have some problems that you can’t solve, you can also write about your problems in the comments below.