Mac 安装 Sass 和使用

安装ruby

Mac 的 OS X 系统自带 Ruby，所以 Mac 这步就可以跳过。

安装sass

$ gem install sass
如果出现permitted问题通常是权限问题，先尝试下面
$ sudo gem install sass
如果安装无限等待尝试下面替换RubyGems镜像

$ gem sources --remove https://rubygems.org/
//如果你系统不支持https用http
$ gem sources -a https://ruby.taobao.org/ 
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org# 请确保只有 ruby.taobao.org
$ gem install sass

如果出现下面错误
ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass
尝试下面方法
$ sudo gem install -n /usr/local/bin sass
安装完成尝试查看sass版本
$ sass -v
参考网址：
http://www.w3cplus.com/sassguide/install.html
http://stackoverflow.com/questions/30812777/cannot-install-cocoa-pods-after-uninstalling-results-in-error/30851030#30851030

配置webstorm的sass和scss

1、打开偏好设置搜索"File Watcher"
2、点击"+"选择"compass sass"一路"Ok","Apply"
同样的方法添加"compass scss"
3、创建"stylesheet"文件是选择"scss"即可

Webpack 配置对 Sass

1. npm i sass-loader node-sass -D

2. 配置 webpack.config.js 的 Sass 相关部分

           {
             test: /\.(css|scss)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
                exclude: /node_modules/
            },

3. 引用 sass 文件

//外部引入 sass 文件
import './styles/test.scss'

//在 .vue 中使用 sass
<style lang="sass">
    //sass语法样式
</style>