时间戳

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

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

问题描述

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

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

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

阅读这篇文章后，我发现使用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 上阅读此页面，我了解到 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 配置。

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

编辑：

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

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

标签： vue.jswebpackbootstrap-vuesass-loaderdart-sass

解决方案

从 webpack/sass-loader 使用 Dart VM 可能是不可能的

我有一种感觉（由评论证实）你包含了太多additionalData: '@import "@/assets/scss/app.scss";'

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

additionalData对于您在大多数组件中需要的变量很有用。诸如原色、文本大小等的东西。不包括一些全局/依赖样式！

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

推荐阅读