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

如何解决如何使用 sass-loader 在 vue.config.js 中配置 Dart Sass 原生可执行文件dart VM？

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

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

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

阅读 this article 后，我发现使用 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 文件上的引导程序导入确实提高了性能，完全删除 sass 编译减少了 95% 的时间。

阅读 dart-sass Github 上的 this page，我了解到 dart Sass 原生可执行文件比 node.js 版本上的 dart sass 更强大。

这是我的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 文档，但没有成功。

编辑：

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

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

解决方法

从 webpack/sass-loader 使用 Dart VM 可能是 not possible

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

中包含了太多内容

additionalData 是任何样式编译的前置 - 在 Vue + sass-loader 的情况下意味着 @/assets/scss/app.scss 中的所有内容都会每次编译，有一个 { Vue SFC 中的 {1}} 块（因为每个 <style> 块都是单独编译的）

<style> 对于大多数组件中所需的变量很有用。诸如原色、文本大小等内容。不要包含一些全局/依赖样式！

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