在 Vue.js 开发模式中重复数据删除 CSS

Question

我正在从事一个 Vue.js 项目，该项目大量使用单个文件组件。这些组件有 scss 个与之相关联的样式。

在生产模式下，多次导入同一组件时出现的重复项 css 会被过滤掉。但在开发模式下，相同的 scss 被多次导入。

这会导致 chrome 调试器在检查和修改 css 时变慢。

有人知道在开发模式下对附加到单个文件组件的 css/scss 进行重复数据删除的方法吗？

这是我当前的 vue 配置：

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: require("./aliases.config").webpack
    },
    plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    _: "lodash"
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  }

Answer 1

这是我们最终解决问题的方法。

仅在组件（即 mixins、变量、函数）中导入纯 SCSS。如果在每个组件中导入带有 CSS 的文件，sass 加载器将不会在开发模式下对 CSS 进行重复数据删除。

在您的 vue 配置中添加以下内容以在每个文件组件中包含您的 scss 变量：

   module.exports = {
     ... 
     css: {
        loaderOptions: {
          sass: {
            data: `
              @import "@src/_variables.scss";
            `
          }
        }
      },
     ...
    }

在您的应用程序条目中导入您的全局 scss（main.js 或等效项）
```
import "bootstrap";
import "@src/global.scss";
```

在您的 global.scss 文件中，您可以导入您的变量文件，以便它也可以访问您的 scss 变量。

在 Vue.js 开发模式中重复数据删除 CSS

Dedupe CSS in Vue.js development mode

vue.js

vue-cli