[$ styles在webpack和打字稿中未定义

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

似乎您对object的期望为styles。仅可以使用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"
            ]
          },