Saya mencoba mengkonfigurasi webpack sedemikian rupa, sehingga untuk file .css tertentu tidak memancarkan css (tidak menambahkan apa pun ke styles.css), tetapi memancarkan lokal (className ke pemetaan gaya di objek yang diimpor di js). Di css-loader modules opsi selalu diaktifkan (alias Modul CSS). Sebagai contoh:

Dalam beberapa file .js:

import cssNoEmit from './styles.noemit.scss'
import cssEmit from './styles.scss'

Isi styles.noemit.scss:

.testNoEmit {
  background: orange;
}

Isi styles.scss:

.testEmit {
  background: blue;
}

Apa yang ingin saya capai adalah bahwa .css yang dihasilkan akhir hanya berisi kelas .testEmit. Selain itu, cssNoEmit dan cssEmit berisi pemetaan ke kelas yang relevan dalam .css yang dihasilkan

Mungkin saja untuk menyelesaikan ini dengan extract-text-plugin, tetapi saya tidak mencari solusi itu, karena plugin ini sudah usang.

Inilah yang saya coba:

Semua upaya memiliki contoh yang dapat direproduksi di sini

EDIT: upaya 1 (terima kasih kepada @felixmosh) dan 5 berhasil.

Upaya 1 (berhasil). css-loader memiliki opsi onlyLocals. Deskripsi dalam css-loader dokumentasi sangat kabur, tetapi seperti yang saya pahami, itu seharusnya melakukan hal yang persis sama yang saya coba capai.

  {
    test: /\.noemit\.scss$/,
    use: [
      //MiniCssExtractPlugin.loader, // after disabling this, it started to work
      {
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: '_',
          },
          importLoaders: 2,
          onlyLocals: true, // setting this to true causes transpilation to crash
        },
      },
      
      ...

    ],
  },

Upaya 5 (berhasil, tidak sempurna). Mencoba menggunakan fitur bawaan webpack, SplitChunksPlugin. Saya mencoba membuat konfigurasi untuk kasus penggunaan ini berdasarkan ini, Dokumen SplitChinksPlugin, ini, ini.

  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        groupUnusedStyles: {
          name: "unusedStyles",
          chunks: "all",

          test: /\.noemit\.scss$/,

          enforce: true
        },
      }
    }
  }

Pendekatan ini mengalihkan css yang tidak diinginkan ke unusedStyles.css

Ini berhasil, dengan satu kelemahan kecil, tetapi membuat frustrasi. Selain unusedStyles.css, ini menghasilkan unusedStyles.js dan ini harus disertakan dalam html, jika tidak, aplikasi tidak akan berjalan.

Untuk lebih spesifik, kedua potongan harus berada di dalam html:

  <script type="text/javascript" src="/app.bundle.js"></script>
  <script type="text/javascript" src="/unusedStyles.bundle.js"></script>

Adakah yang tahu cara membuatnya bekerja tanpa perlu menambahkan bundel lain?

Upaya 2 (tidak berhasil). Jangan gunakan setelan onlyLocals dan abaikan pemuat yang bertanggung jawab atas "output css" (seperti style-loader atau mini-extract-css-plugin). Dalam hal ini isi css yang diimpor sangat aneh

strange contents of the imported object in javascript

Upaya 3 (tidak berfungsi) null-loader juga tidak berfungsi, karena hanya mengimpor objek kosong

Upaya 4 (tidak berhasil). Ada ide lain:

class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
  getCssChunkObject(mainChunk) {
    return {};
  }
}

... // use ServerMiniCssExtractPlugin the same way as MiniCssExtractPlugin 

Ini tidak berhasil, karena .css final memiliki semua gaya, seolah-olah MiniCssExtractPlugin biasa digunakan

Selain itu, ada adalah utas terkait di github.

0
Daniel 11 April 2020, 19:45

1 menjawab

Jawaban Terbaik

Upaya pertama Anda adalah yang benar, cukup hapus MiniCssExtractPlugin.loader dari daftar pemuat noemit.scss.

Saya sudah mencobanya secara lokal, berhasil, css keluar hanya berisi file "noemit" tidak ada tetapi ada pemetaan objek modul css untuk keduanya.

Pemuat yang dihapus (MiniCssExtractPlugin) adalah yang bertanggung jawab untuk memasukkan scss ke dalam file css akhir.

1
felixmosh 11 April 2020, 21:55