sass的使用

• 对于单个的sass文件，vscode有easy-sass插件。(我在使用easy-sass前没有安装ruby，在vscode里也可以用。)
  easy-sass 有四个参数可以设置：

//是否自动编译sass/scss文件，建议设置为false
easysass.compileAfterSave:true
//一个正则，匹配的文件会被排除，不会编译成css
easysass.excludeRegex:""
//一个数组，定义输出 css 文件的排版风格和文件名，可以同时编译输出多个不同风格、文件名的 css 文件，参数值：
//nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码。
easysass.formats:[
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
  ]
//设置输出路径，可以是绝对路径或相对路径。如果是相对路径，则以 VSCode 当前打开的项目的根目录为基准，默认是当前路径
easysass.targetDir:""

• 当然可以在安装ruby后，gem install sass安装sass,（更加推荐这种做法)，然后使用命令行编译文件。

1.基本编译命令：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2.将项目中sass目录中所有.scss(.sass)文件编译成.css文件，并且这些CSS文件都放在css目录当中：

sass sass/:css/

3.在编译Sass时，开启watch功能，这样只要你的代码进行任何修改，他都能自动监测到代码的变化，并且给你直接编译过来。

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

关于sass使用与安装的文章：sass带来的变革

在vue项目中使用：
在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分，然后它根据lang属性自动判断出要使用的loaders。所以，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
先安装sass/scss loader：

npm install sass-loader node-sass -D

然后就可以使用它了，记得给style指定lang="sass"或lang="scss"。
前面说到,vue-loader允许能根据lang属性自动判断出要使用的loaders。它是怎么样做到的？有这么神奇嘛？我们下面来看一看最核心部分的源代码：

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}