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，将选项传递给预处理器加载器（多个文件）

1 个答案: