在普通项目和vue-cli项目中使用sass

发表于 | 分类于

假设你已经熟读sass文档，写的出来一些sass文件了

在普通项目中

安装ruby

1
ruby -v

//如安装成功会打印

1
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。（使用淘宝的gem源https://ruby.taobao.org/）如下：

  1. 删除原gem源

    1
    gem sources --remove https://rubygems.org/

  2. 添加国内淘宝源

    1
    gem sources -a https://ruby.taobao.org/

  3. 打印是否替换成功

    1
    gem sources -l

    更换成功后打印如下

    1
    2
    *** CURRENT SOURCES ***
    https://ruby.taobao.org/

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。

要安装最新版本的Sass和Compass，你需要输入下面的命令：
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)

1
2
gem install sass
gem install compass

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：
1
2
3
4
5
sass -v
Sass 3.x.x (Selective Steve)
compass -v
Compass 1.x.x (Polaris)
...

如下sass常用更新、查看版本、sass命令帮助等命令：
//更新sass
1
gem update sass

//查看sass版本
1
sass -v

//查看sass帮助
1
sass -h

编译

命令行编译
单文件转换命令

1
sass input.scss output.css

或其它工具sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等编译。

在vue项目中

前提：用vue -cli脚手架生成vue项目，cmd进入到项目根目录

用npm 安装sass的依赖包（可使用cnpm淘宝镜像）

1
2
cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev #sass-loader依赖于node-sass

在build目录上找到webpack. base.conf.js文件，在module的rules中插入以下代码

1
2
3
4
5
{
	test: /\.sass$/,
	loaders: ['style', 'css', 'sass']
}

在vue文件中使用sass

1
2
3
4
5
6
<style lang="scss">
$color: $fff;
.demo {
	color: $color
}
</style>

也可以引用sass文件

1
2
3
<style lang="scss">
@import "./style/common";
</style>