vue-cli 3.0安装sass/scss到vue项目，详解

vue-cli 3提供了两种方式集成sass/scss

1. 创建项目时选择预处理器sass
2. 手动安装sass-loader

一、创建项目选择预处理器sass

注意：这种方式如果不想在下次构建vue项目时将sass作为默认配置选项写入项目开发依赖则在最后选择不作为未来配置项。

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

移动上下键选择“Manually select features”：表示手动选择创建项目的配置。

显示如下：

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors。

显示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (U
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择第二个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们自动安装sass-loader 以及 node-sass依赖。

二、手动安装

如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader以及 node-sass来集成scss。

npm install -D sass-loader node-sass

三、使用sass

至此我们只需要在style指定lang为scss即可：

<style lang="scss">
	$color = red;
</style>

vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。

四、全局引用配置（重点）

1、Vue 单件引用

假如现在我们已经将变量都定义在 variables.scss 文件上了，如果要在某个 .vue 文件里使用变量就要先将其引入。如：

<template>
...
</template>

<script>
...
</script>

<style lang="scss">
@import ("你的路径/variables.scss");

.button {
   background: $--primary-bg;
}
</style>

但是这种方法不长久，如果我们每个组件都要引入，那不是每个 .vue 都要 @import 一次？这也太麻烦了。
所以应该考虑下面的sass全局引用讲解。

2、sass全局引用

a.写在 App.vue 上（不推荐使用）

如果你写的是一个网站，那么肯定会用到 App.vue 这个文件。所以你可以在 App 这个组件里 @import。注意：不要在 App 组件里写 scoped ，这样引入的样式都会应用到每个组件上。

<template>
...
</template>

<script>
...
</script>

<style lang="scss">
@import "你的路径/variables.scss";
...
</style>

b.vue-cli 3全局配置，自动引入(推荐使用)

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader
用命令行工具执行下面的代码

vue add style-resources-loader

然后它会让你选择你使用的预处理器

 

 安装完成后选择你使用的预处理器，你可以在 vue.config.js （如果你没有这个文件，就在你的项目根目录里新建一个就行了）复制如下代码：

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
      // 这里假设你有 `src/variables.scss  src/scss/mixin.scss` 这两个文件
        path.resolve(__dirname,"./src/scss/variables.scss"),
        path.resolve(__dirname,"./src/scss/mixin.scss")
      ]
    }
  }
}

 

备注

现在的 vue 已经将 /build/webpack.xxx.js 的 webpack 配置文件都隐藏起来了，而这个 vue.config.js 就像是 webpack.xxx.js 的总和，你可以配置 vue 提供的选项也可以混入 webpack 的配置。