小程序开发：mpvue使用sass/scss提升样式开发效率

安装

npm install -D node-sass sass-loader

指定css语言

指定sass编译时的引用路径

在build/utils.js中指定了引用路径

var scssPath = resolve('./src/static/style')
...
generateLoaders('sass', {indentedSyntax: true, includePaths: [scssPath]})

好处是里使用@import时就可以省略长长的相对路径，比如src/pages/me/settings/index.vue路径下

自动化

即使不写长长的相对路径，也还觉得一遍遍重复地在每个.vue文件里@import很麻烦？
公共scss文件分拆或重构时，需要去每个.vue文件里维护引用？
sass-resources-loader可以解决这个问题

安装

npm install -D sass-resources-loader

配置

// 配置loader
var sassResourceLoader = {
    loader: 'sass-resources-loader',
    options: {
      resources: [
        path.resolve(__dirname, '../src/common/style/mixin.scss'),
        path.resolve(__dirname, '../src/common/style/var.scss')
      ]
    }
  }

然后把这个loader加在generateLoaders函数中

function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader, px2rpxLoader, postcssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
      // 使用sass-loader时，添加sassResouceLoader
      if ('sass' === loader) {
        loaders.push(sassResourceLoader)
      }
    }

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

这样就无需在.vue文件中@import了，sass-resources-loader会自动帮你管理引用。

开发工具的配合

使用Webstorm开发工具，不写@import就会有烦人的小黄线提示你找不到@include、@extend这些函数？
小技巧解决逼死强迫症的问题：
右键文件夹，标为resource root即可

配置资源路径