Блог

У меня есть postcss с плагином cssnano в конфигурации моего веб-пакета. Это часть конфигурации:

 {  test: /.s[ac]ss$/i,  use: [MiniCssExtractPlugin.loader, "css-loader", postcssWithCssnanoLoader, "sass-loader"] },  

Я выяснил, что преобразования postcss применяются к каждому отдельному модулю scss/css. Например:

 //file1.scss .some-class{  width: 100px; } .some-class{  height: 100px; }  //final css .some-class {  width: 100px;  height: 100px; }  

Но если есть еще один файл scss:

 //file2.scss .some-class{  background: black; } .some-class{  color: white; }  //final css .some-class {  width: 100px;  height: 100px; } .some-class {  background: black;  color: white; }  

Это имеет смысл из-за конфигурации и того, как работает webpack. Но как применить преобразования postcss ко всему набору css? Я хочу получить следующий результат:

 //final css .some-class {  width: 100px;  height: 100px;  background: black;  color: white; }  

Я попробовал это (с небольшой надеждой на успех).:

 {  test: /.s[ac]ss$/i,  use: [  MiniCssExtractPlugin.loader,  postcssWithCssnanoLoader,  { loader: MiniCssExtractPlugin.loader, options: { emit: false } },  "css-loader",  "sass-loader"  ]  }  

Очевидно, что это не сработает.