methods for handling global SASS/SCSS variables in

vue-cli@3
12:01:24 on September 6, 2020

-two mainstream methods of sharp:

• use ide/pre-processors.html-sharpsass css: { loaderOptions: { sass: { // webpack.docschina.org/loaders/sass-loader/-sharpoptions // webpack.docschina.org/loaders/sass-loader/-sharpadditionaldata // cli.vuejs.org/guide/css.html-sharppassing-options-to-pre-processor-loaders additionalData: '@import "~@/style/variables.scss";' } } }, }

-sharp Note

vue.config.js

// vue.config.js

module.exports = {
  // sass-loader
  // https://vue-loader.vuejs.org/zh/guide/pre-processors.html-sharpsass
  css: {
    loaderOptions: {
      sass: {
        // webpack.docschina.org/loaders/sass-loader/-sharpoptions
        // webpack.docschina.org/loaders/sass-loader/-sharpadditionaldata
        // cli.vuejs.org/guide/css.html-sharppassing-options-to-pre-processor-loaders
        additionalData: '@import "~@/style/variables.scss";'
      }
    }
  },
}

-sharp Note Meaning:

• after introducing variables.scss into vue.config.js , Do not introduce it in main.js . Otherwise SassError: An @ import loop has been found:

-sharp reference:

• ide/css.html-sharppassing-options-to-pre-processor-loaders" rel=" nofollow noreferrer "> pass options to preprocessor Loader
• add Sass / SCSS before the actual file Code

https://www.youzanyun.com/zan.
official documentation gives the first way to feel better.
feels that if the style of the design draft is different from that of vant, it is not suitable

is postcss