Question

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

在生产模式下，多次导入相同组件而产生的重复CSS被过滤掉。但是在开发模式下，同一scss会多次导入。

当检查和修改CSS时，这会导致chrome调试器的运行速度变慢。

有人知道在开发模式下将附加到单个文件组件的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

这就是我们最终解决它的方式。

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

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

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

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

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

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

1 个答案: