vue.js中使用scss

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011649691/article/details/82626588

在vue项目中使用scss，一个重要的概念就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。

所以需要安装对应的loader：

npm install sass-loader node-sass vue-style-loader --D

好消息是无需为scss/sass配置loader，因为vue-loader会自动根据文件格式后缀名去使用对应的loader。它是怎么样做到的？有这么神奇嘛？我们下面来看一看最核心部分的源代码

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')
  }
}

使用scss：

<style lang="scss" scoped>
.swiper-tab-item {
        transition: all $time;
        font-size: 18px;
        height: 42px;
        display: inline-block;
        color: #777777;
    }
</style>