Vue 中全局使用sass变量

vue中全局使用sass变量

安装依赖node-sass sass-loader

@vue/cli 3 中使用

在 vue.config.js 文件中添加以下配置（如果没有找到vue.config.js文件，就自己在项目根目录新建一个文件即可）。

sass-loader v8.0 下版本使用以下配置。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
      	// 引入全局scss文件
        data: `@import "@/styles/_variable.scss";`
      }
    }
  }
}

sass-loader v8.0 以上版本使用配置。

module.exports = {
  css: {
    loaderOptions: {
      scss: {
      	// 8.0 以上版本将 data 改为 prependData 
        prependData: `@import '@/assets/style/_variable.scss';`
      }
    }
  }
};

Vue CLI 配置项