默认情况下 Vue.js 是不支持 Sass、SCSS 的,如果想要使用它们,只需要一些简单的安装配置即可。
1.安装依赖包
(1)进入项目文件夹,执行如下两个命令安装相关的依赖包。
npm install --save-dev sass-loadernpm install --save-dev node-sass
(2)接着编辑 build 文件夹下的 webpack.base.conf.js 文件,在 rules 里面添加如下配置:
{test: /\.sass$/,loaders: ['style', 'css', 'sass']}
2.使用样例
(1)首先在 src/assets 目录下新建一个 var.scss 文件,里面存放两个变量,内容如下:
$header-color: orange;$header-size: 20px;
(2)在一个 vue 页面中我们引入这个 .scss 文件并使用,同时还用到了 Sass 的嵌套特性。
<template><div id="header"><div>欢迎访问 </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>
原文:/blog/cache/detail_2543.html