nuxt项目使用scss预处理器

1.安装node-sass

yarn add sass-loader node-sass
或npm i  sass-loader node-sass

这样就可以识别.vue文件中的scss语法了,但不能使用全局变量

2.安装style-resources(全局使用scss变量)

 yarn add @nuxtjs/style-resources
 或 npm i @nuxtjs/style-resources

3.配置nuxt.config.js中的module

 modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: './assets/css/variables.scss',  注意这里不能使用别名(即~/@)
    // sass: ...
  },

这样就可以在任何地方使用scss变量了
styleresources官方教程

猜你喜欢

转载自blog.csdn.net/weixin_42565137/article/details/105581603