# 前言

事情是发生在最近使用 vue 项目的时候使用 sass 作为 css 辅助开始的，因为之前使用习惯 stylus 都是一帆风顺的，而在这次项目里我在 main.js 上引入全局 sass 文件突然报了一下错误，如下： vue引入sass全局

# vue 项目引入全局 sass 的两种方式：

# 针对自己搭建 vue+webpack+sass 的项目

这里有个重要的注意事项要讲：看网上很多讲解“vue 引入全局 sass”的文章，许多文章都存在着误导，现在我先将一下网上存在误导的大致流程以及我的解决方案。

相信使用 vue 引入 sass 的娃可能都有这样的经历：很高兴在 vue 项目上使用了 sass 了，所以根据网上教程安装个 node-sass 和 sass-loader，接着顺手在 webpack.base.conf.js 上配置类似如下的选项：

{
test: /.scss$/,
loaders: ["style", "css", "sass"]
}

1
2
3
4

配置成功，接着以为可以在 vue 组件上用得风生水起了，解决当在 main.js 文件上引起 reset.scss 和 global.scss 文件时出现上图报错

接着搜索度娘说需要使用 sass-resources-loader 引入全局 sass 什么的，跟着网上的教程安装插件

然后在 build/utils.js 上配置


{
  loader: {
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve('src/common/scss/index.scss')
      }
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11

上述配置直接再 vue 项目中引入全局 sass 样式了，所以在 main.js 删除相关的引入（import 'xxx.sass'。。。）

# 针对直接使用 vue-cli 搭建的项目

安装 node-sass 和 sass-loader
在 main.js 上引入 import 'xxx.sass'就大公告成

# 总结

没错，这样的配置可以在 vue 正确引入 sass 全局样式，但我想说的是，如果你是使用 vue-cli 搭建的 vue 项目的话，因为 vue-cli 早已在 build/utils.js 上配置好所有有关 css 辅助工具（sass、stylus、less。。。）了，

因此如果是使用 vue-cli 搭建 vue 项目的话请直接安装好对应的 css 辅助工具的插件，然后在 main.js 上引入 import 'xxx.sass'就大公告成，sass 的配置成功了；

另外如果是自己使用 vue+webpack 搭建的项目可以重复上面第一步操作，sass 的配置也就成功了

JyLie