Vue.js - 在项目中使用Sass、SCSS的方法(安装sass-loader)

作者: hgweb 发布时间: 2019-10-10 浏览: 440 次 编辑

默认情况下 Vue.js 是不支持 SassSCSS 的,如果想要使用它们,只需要一些简单的安装配置即可。

1,安装依赖包

(1)进入项目文件夹,执行如下两个命令安装相关的依赖包。

npm install --save-dev sass-loader
npm install --save-dev node-sass
(2)接着编辑 build 文件夹下的 webpack.base.conf.js 文件,在 rules 里面添加如下配置:
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

原文:Vue.js - 在项目中使用Sass、SCSS的方法(安装sass-loader)

2,使用样例

(1)首先在 src/assets 目录下新建一个 var.scss 文件,里面存放两个变量,内容如下:
$header-color: orange;
$header-size: 20px;

(2)在一个 vue 页面中我们引入这个 .scss 文件并使用,同时还用到了 Sass 的嵌套特性。

<template>
  <div id="header"><div>欢迎访问 hangge.com</div></div>
</template>
 
<script>
  export default {
    name: 'test',
    data() {
      return {}
    }
  }
</script>
 
<style lang="scss">
  @import '../assets/var.scss';
  #header {
    div {
      color: $header-color;
      font-size: $header-size;
    }
  }
</style>

(3)最终页面显示效果如下:

原文:Vue.js - 在项目中使用Sass、SCSS的方法(安装sass-loader)