vue sass 安装

1、node 安装依赖

npm install node-sass --save-dev

npm install sass-loader --save-dev

2、sass全局引用

npm install --save-dev sass-resources-loader

配置build/utils.js

function resolveResource(name) {

return path.resolve(__dirname, '../static/style/' + name)

}

function generateSassResourceLoader() {

var loaders = [

cssLoader,

    'sass-loader',

    {

loader:'sass-resources-loader',

      options: {

// 多个文件时用数组的形式传入，单个文件时可以直接使用path.resolve(__dirname, '../static/style/blog.scss'

        resources: [resolveResource('blog.scss')]

}

}

]

  if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

      fallback:'vue-style-loader'

    })

}else {

return ['vue-style-loader'].concat(loaders)

}

}

return {

css:generateLoaders(),

  postcss:generateLoaders(),

  less:generateLoaders('less'),

  // sass: generateLoaders('sass', { indentedSyntax: true }),

// scss: generateLoaders('sass'),

//配置sass-resources-loader

  sass:generateSassResourceLoader(),

  scss:generateSassResourceLoader(),

  stylus:generateLoaders('stylus'),

  styl:generateLoaders('stylus')

}

由于sass是基于ruby环境下使用的，所以要先安装ruby , win 7系统直接进入http://rubyinstaller.org/下载你所需要的ruby版本。

下载完，安装程序。

运行cmd.exe命令

输入ruby -v,会显示安装的ruby 版本.

现在我们开始安装sass，在“开始”菜单中打开ruby的控制面板。

输入gem install sass ,按回车键执行命令。如果提示安装成功，这个步骤后面的内容可忽略。但大多数情况下，由于国内网络原因，导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了。具体 *** 作如下：

先移除默认的https://rubygems.org源，命令为gem sources --remove https://rubygems.org/，按回车，结果如下：

添加淘宝的源，命令为gem sources -a https://ruby.taobao.org/,按回车，结果如下：

查看当前使用的源，命令为gem sources -1，按回车，结果如下：

执行gem install sass 命令，安装sass， 结果如下：

执行sass -v命令，就可以看到你安装的sass版本了，结果如下：

到这里，sass就已经安装好了。后话：

更新sass的命令语句为：gem update

如果想要安装sass的某一特定版本，命令语句为： gem install sass --version=3.3.0

如果想要删除sass的某一特定版本，命令语句为： gem uninstall sass --version=3.3.0

查看ruby 安装的所有程序包，命令语句为： gem list

---