$styles 未使用 webpack 和 typescript 定义

Question

我有一个打字稿 SharePoint spfx 解决方案。当我使用 webpack 编译时，我的 $styles 变得未定义，但我可以直接使用类名。

我觉得这里有配置问题，有人可以帮忙吗？

这是我的 scss：

@import "~bootstrap/scss/bootstrap";

//.alert.alert-warning.customalert {
//  text-align: center
//}

.app {
   .top {
        text-align:center;
        justify-content: center;
        .customalert {
          margin-bottom: 0px !important;
          font-size: 14px;
        }
      }
  }

这是我输出的 div：

import styles from './AppCustomizer.module.scss';
return `<div class="${styles.app}">
        <div class="${styles.top}">
          <div class="alert alert-${alertStatus} ${styles.customalert}">
            <strong>${alertTitle}</strong> ${alertDescription}
          </div>
        </div>
      </div>
    and here is my webpack.config.js:

        const path = require("path");
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');

    module.exports = {
      mode: "development",
      entry: ['@babel/polyfill',
        path.resolve(__dirname, './Classic/client/bootHeader.ts')],
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/
          },
          {
            test: /\.(s*)css$/,
            use: [
              // fallback to style-loader in development
              process.env.NODE_ENV !== "production"
                ? "style-loader"
                : MiniCssExtractPlugin.loader,
              "css-loader",
              "sass-loader"
            ]
          },
          {
            test: /\.(png|jp(e*)g|svg)$/,
            use: [
              {
                loader: "url-loader",
                options: {
                  limit: 15000, // Convert images < 8kb to base64 strings
                  name: "images/[hash]-[name].[ext]"
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        })
      ],
      resolve: {
        extensions: [".tsx", ".ts", ".js"]
      },
      output: {
        filename: "classicBundleAG.js",
        path: path.resolve(__dirname, "Classic"),
        libraryTarget: "umd"
      },
      //externals: [
      //  "@microsoft/sp-loader",
      //]
    };

请注意，如果我像“customalert”一样直接访问样式，则样式会被识别，但 $styles 永远不会被识别并保持未定义。

Answer 1

看起来您期待来自styles 的object。只有css-modules才有可能。要启用它，请将 modules: true 添加到您的 css-loader 配置中：

          {
            test: /\.(s*)css$/,
            use: [
              // fallback to style-loader in development
              process.env.NODE_ENV !== "production"
                ? "style-loader"
                : MiniCssExtractPlugin.loader,
              {
               loader: "css-loader",
               options: {
                modules: true
               }
              },
              "sass-loader"
            ]
          },