Vue-cli 3.0，将选项传递给预处理器加载器（多个文件）

Question

我在 vue.config.js 中有这个配置，来自 official documentation

const fs = require('fs');

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/sass/variables.sass', 'utf-8')
      }
    }
  }
};

如果我想传递多个文件，会怎样，例如。 src/sass/mixin.sass?

解决方案之一是创建一个名为 ex. main.sass

@import variables
@import mixin

任何其他解决方案，使用 vue.config.js?

Answer 1

data 将字符串作为参数，而不是文件（或文件列表）。

因此，为了从多个文件中获取输入，您必须单独加载它们并加入它们的内容。

const fs = require('fs');

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        data: ['src/sass/variables.sass', 'src/sass/mixin.sass']
                            .map(fileName => fs.readFileSync(fileName, 'utf-8')).join('\n')
      }
    }
  }
};

或者创建一个辅助函数，以提高可读性：

const fs = require('fs');

function loadFiles(files) {
  return files.map(fileName => fs.readFileSync(fileName, 'utf-8')).join('\n')
}

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        data: loadFiles(['src/sass/variables.sass', 'src/sass/mixin.sass'])

      }
    }
  }
};

Vue-cli 3.0，将选项传递给预处理器加载器（多个文件）

Vue-cli 3.0, passing Options to Pre-Processor Loaders (multiple files)

webpack

vue.js

vue-cli