Bagaimana untuk menyahpasang bootstrap apabila anda menukar bahagian hadapan mikro?

Question

<磷>Saya mempunyai masalah, apabila pasukan kami menggunakan react dan bootstra phosphorus dan modul lain dengan teknologi yang berbeza, mereka menggunakan tailwind, jadi apabila pautan bahagian hadapan mikro kami ditukar kepada pautan mereka, gaya fosforus Bootstra kami Masih wujud, dan sejak tailwind dan bootstrap mempunyai banyak nama kelas tetapi pilihan yang berbeza, kami kini mempunyai masalah ini dalam gaya. Jadi bootstra _utilities.scss ini datang dari webpack dan atas sebab tertentu walaupun saya mengecualikan node_modules, mungkin seseorang menghadapi masalah ini dan mengetahui penyelesaian kepada masalah tersebut? Ini ialah laluan apabila scss ini diserlahkan: webpack://./node_modules/bootstra/scss/mixins/_utilities.scss fosforus <磷>Konfigurasi webpack saya untuk mengecualikan nodu_modules:

<磷>modul: { peraturan:[ { Ujian: /.(js|ts|tsx)$/, Kecualikan: /node_modules/, gunakan: { pemuat: 'ts-loader', }, },

Answer 1

Jadi, saya menemui penyelesaiannya, mula-mula buat bootstrap.scss berasingan dalam fail .scss ini dan import bootstrap.css (dalam kes saya, saya hanya perlukan grid daripada bootstrap):

@import 'bootstrap/dist/css/bootstrap-grid.min.css';

Untuk fail sass atau scss, tetapan ini hendaklah dalam webpack.configuration.js:

return merge(filteredConfig, {
    entry: './src/moduleEntry.tsx',
    plugins: [
      new ESLintPlugin({ extensions: ['js', 'jsx', 'ts', 'tsx'] }),
      new MiniCssExtractPlugin({
        filename: `${moduleName}.css`,
      }),
    ],
    module: {
        rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            !isProduction ? 'style-loader' : MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            {
              loader: 'css-loader',
              options: {
                modules: {
                  auto: true,
                  localIdentName: '[local]-[hash:base64:5]',
                },
              },
            },
            // Compiles Sass to CSS
            'sass-loader',
          ],
        },
...]
}

Perubahan ini akan meletakkan fail .scss anda dalam mod pengeluaran, menggabungkannya menjadi satu fail .css dan meletakkan CSS daripada Bootstrap ke dalam style.css modul tepat anda.