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

最新推荐文章于 2024-07-18 14:43:52 发布

Smile_ping

最新推荐文章于 2024-07-18 14:43:52 发布

阅读量875

点赞数

分类专栏： vue 文章标签： scss 全局配置scss vue全局引入mixin文件

本文链接：https://blog.csdn.net/Smile_ping/article/details/120296040

版权

vue 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

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

文章目录

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

sass-resources-loader

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