如何使用 sass-loader 在 vue.config.js 中配置 Dart Sass 本机可执行文件（dart VM）？

Question

我正在开发使用 vue.js 2.6、[=46= 构建的 SPA 应用程序]bootstrap-vue 2.8, sass 1.34 (dart-sass) 作为预处理器和 sass-loader 10.2.

随着项目变得越来越大，我们已经从 Node-Sass 切换到 Dart-Sass（因为不推荐使用 node-sass）。

不幸的是，我们现在在构建或开发项目时遇到性能问题，因为现在创建一个新构建大约需要 15 分钟，而且我们在开发中经常遇到内存使用率过高的问题。

阅读 this article, I figure out using the speed-measure-webpack-plugin 后，95% 的编译时间是由于 css 编译目的，因为大多数 SMP 堆栈跟踪包含以下几个条目：

mini-css-extract-plugin, and 
css-loader, and 
vue-loader, and 
postcss-loader, and 
sass-loader, and 
cache-loader, and 
vue-loader took 2 mins, 40.68 secs

删除主 app.scss 文件上的 bootstrap 导入确实提高了性能，完全删除 sass 编译可以节省 95% 的时间。

阅读 this page on dart-sass Github，我了解到 dart Sass 本机可执行文件比 sass on node.js版本。

这是我的vue.config.js:

process.env.VUE_APP_VERSION = require('./package.json').version
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

module.exports = {
  runtimeCompiler: true,
  devServer: {
    disableHostCheck: true
  },
  css: {
    loaderOptions: {
      scss: {
        implementation: require('sass'), // This line must in sass option
        additionalData: `@import "@/assets/scss/app.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .options({
        fix: false
      })

    config.plugin('speed-measure-webpack-plugin')
      .use(SpeedMeasurePlugin)
      .end()
  }
}

如果我很好理解，使用此配置在编译期间使用 Node.js 上的 Dart Sass。

我已经从 this page 设置了 dart-sass 独立版本，我可以在命令行上执行它，但我实际上不知道是否可以运行它在 webpack 编译中而不是 Node.js 版本？我搜索了 vue.js、webpack 和 sass-loader 文档，但没有成功。

编辑：

此 post 中描述的编译时间问题是由于在 additionalData（additionalData：@import "@/assets/scss/app.scss";）中导入了包含整个应用程序 css 的文件。我们这样做是为了在多个组件中使用 Bootstrap 变量，但这显然不是一个好方法。如果你想在 vue 组件中使用 bootstrap 变量，最好的选择可能是在每个需要它的组件上导入一个包含你的自定义和 bootstrap 变量的文件，比如：

<style lang="scss" scoped>
@import '@/assets/scss/bootstrap';
</style>

Answer 1

使用来自 webpack/sass-loader 的 Dart VM 可能是 not possible

我有一种感觉（通过评论证实）你在 additionalData: '@import "@/assets/scss/app.scss";'

中包含了太多内容

additionalData 被预先添加到任何样式编译 - 在 Vue + sass-loader 的情况下意味着 @/assets/scss/app.scss 中的所有内容每次都被编译 Vue SFC 中有一个 <style> 块（因为每个 <style> 块是单独编译的）

additionalData 对于您在 most 组件中需要的变量很有用。原色、文本大小等内容。不包含一些 global/dependency 样式！

只需将大部分 SASS/CSS 导入移动到您的 main.js 或 App.vue 或简单地删除 additionalData，您的应用构建时间将大大缩短...

如何使用 sass-loader 在 vue.config.js 中配置 Dart Sass 本机可执行文件（dart VM）？

How to configure Dart Sass native executable (dart VM) in vue.config.js with sass-loader?

webpack

vue.js

sass-loader

bootstrap-vue

dart-sass