小编Ars*_*ram的帖子

背景：

我有一个Webpack 设置，用于使用带有esbuild-loader的实时 HMR 服务器通过 PurgeCSS 来预处理 SCSS，以加快 Webpack 中的编译速度，但即便如此，我的编译时间仍然很慢，我想要 ESBuild 的原始速度并删除 Webpack完全设置。

ESBuild 的基本设置很简单，您可以使用 npm 安装 esbuild 并在package.json中添加以下代码：

{
  ...
  "scripts": {
    ...
    "watch": "esbuild --bundle src/script.js --outfile=dist/script.js --watch"
  },
  ...
}

并使用以下命令运行它：

npm run watch

此单行配置将捆绑您的脚本和样式（您可以在 script.js 中导入 style.css）并输出 dist 目录中的文件，但这不允许对 ESBuild 进行高级配置，例如为样式表输出不同的名称和脚本文件或使用插件。

问题：

1. 如何使用外部配置文件配置 ESBuild？
2. ESBuild 不支持开箱即用的 SCSS。如何配置外部插件（如esbuild-sass-plugin），更进一步，如何设置PostCSS及其插件（如Autoprefixer ） ？
3. 如何设置开发服务器自动重建？
4. 如何设置 PurgeCSS？

背景：

我正在尝试基于 Google 的 Material Theme Builder 3在 SASS/JS 中生成调色板，它要求根据相对亮度而不是亮度/亮度函数生成色调调色板。

问题：

我可以使用 SCSS 中的以下函数获取亮度值：

@function get-luminance($color) {
    $colors: (
        'red': red($color),
        'green': green($color),
        'blue': blue($color),
    );

    @each $name, $value in $colors {
        $adjusted: 0;
        $value: $value / 255;

        @if $value < 0.03928 {
            $value: $value / 12.92;
        } @else {
            $value: ($value + 0.055) / 1.055;
            $value: math.pow($value, 2.4);
        }

        $colors: map-merge($colors, ($name: $value));
    }

    @return (map-get($colors, 'red') * 0.2126) + (map-get($colors, 'green') * 0.7152) + (map-get($colors, 'blue') * …

背景：

我使用的是Prettier-VSCode的代码格式化扩展程序，可以在保存时自动格式化我的代码。

问题：

我习惯在我的sass文件（只有一个属性）中写单行块，即

.some-class { background: #f00; }

问题是Prettier扩展程序将其格式化为多行，即

.some-class {
    background: #f00;
}

似乎更漂亮的样式样式用于css / scss文件，我发现可以通过在设置中启用此设置来覆盖这些设置：

"prettier.requireConfig": true并使用.prettierrc.js文件，但无法关闭单行块的棉绒。如果有人在此有任何修复，将不胜感激。

谢谢

更新：

设置不能被覆盖"prettier.requireConfig": true。该更漂亮-代码格式化扩展VSCode没有一个选项，编辑从样式设置VSCode掉毛。

但是，有一个选项可以启用stylelint集成，但这需要stylelint和prettier-prettier npm模块。

默认情况下，漂亮的样式将标准stylelint配置用于样式表的样式和格式设置。

在下面发布解决方案。