Question

我最近开始将Less与Web Essentials（VS2017）的捆绑功能一起使用。

尽管我目前仅在开发中，但我注意到我的样式表越来越大-到目前为止，有15,000行以最小化形式存在。经过进一步调查，结果发现输出文件中有很多选择器重复。

目前，我不确定该问题是由Web Essentials引起的，还是我误解了Less的工作原理。

我设置的方式是每个组件都有自己的.less文件。

为了编译整个程序，我必须根据需要引用其他较少的文件，这是一个示例：

@import "../varGlobal.less";
@import "mdc-core-button.less";
@import "../Boilerplate/Iconography.less";
@import "../Prefix/mixTransition.less";

.mdc-icon-button_theme--dark {
    &:extend(.mdc-button_state--dark all);

    &[data-inactive] {
        color: @textDark3;
    }

    &:not([data-inactive]) {
        color: @textDark2;

        &:focus {
            color: @textDark1;
        }
    }
}

这样一来，更少地为每个组件生成一个单独的CSS文件，然后将它们全部由Web Essentials捆绑在一起。

问题是所有导入功能的代码都包含在CSS输入文件中，然后在最终输出文件中捆绑了许多次。

我尝试将reference关键字添加到import语句中，该方法确实可以删除重复项，但是所有的“扩展代码”都重新添加回了输入文件中，而不是作为main的一部分进行引用输出文件。

@import (reference) "../Prefix/mixTransition.less";

这是我的捆绑软件文件中的摘录-并非所有样式表都包括在内，但应该会有所帮助。

[
  {
    "outputFileName": "Assets/Styles/MainBundle.css",
    "inputFiles": [

      "Assets/Styles/Components/mdc-core-button.css",
      "Assets/Styles/Components/mdc-icon-button.css",
      "Assets/Styles/Components/mdc-top-app-bar.css"
    ]
  }
]

在某些我拥有实用程序代码的情况下，同一个选择器会重复20次或更多次。

我在做什么错了？

**更新**

鉴于reference关键字和扩展功能都可以在样式表中保存行，如果它们不能一起使用，则可以找到节省最多空间的行。

我已将reference关键字添加到所有输入文件中，并且行数从15,000减少到5,000。似乎扩展功能在某种程度上仍然可以工作，但前提是选择器位于同一文件中，而在99％的情况下却没有。

使用更少的CSS复制样式

0 个答案: