vue全局使用scss引入mixin、function等函数

vue全局使用scss引入mixin、function等函数

desc：

• 引入全局，就不用每个页面引用…

安装

npm install sass-resources-loader -D

配置

vue构建webpack配置中 build > utils.js文件

新增配置

  // 全局文件引入 编译一个文件可以省去这个函数
  function resolveResource(name) {
    // 配置路径
    return path.resolve(__dirname, '../src/assets/style/scss/' + name);
  }

  function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../src/assets/style/scss/mixin.scss'
          resources: [resolveResource('mixin.scss'), resolveResource('common.scss')]  
        }
      }
      ];
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
  }

  // return对象引入方法
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // 默认配置
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),

    // 引入方法
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),

    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

重启服务

• 重启服务即可