React（模块化CSS）中可以删除css类前缀吗

Question

我正在使用 React 和 NextJS，我注意到在使用模块化 scss 文件时，它会使用文件名自动为我的类名添加前缀？

有办法禁用它吗？因为它使得 DOM 很难阅读。

EG在我下面的代码中，div 类是 “splash_splashContent_3R9Lp”，而我希望它是 “splashContent_3R9Lp” 并且不以 scss 文件名为前缀。

这可能吗？

文件结构

Components
 - Splash
   - Splash.jsx
   - splash.module.scss

JSX：

import React from "react"
import styles from './splash.module.scss'

export const Splash = (props) => {
  return (
    <div className={styles.splashContent}>
      <p>Splash text goes here</p>
    </div>
  )
};

SCSS

.splashContent {
 example code goes here
}

DOM

<div class="splash_splashContent_3R9Lp>
 <p>Splash text goes here</p>
</div>

Answer 1

尝试安装此依赖项：

npm install @zeit/next-sass sass

然后更新你的nex.config.js：

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  cssLoaderOptions: {
    modules: {
      getLocalIdent: (_, localIdentName, localName) => localName,
    },
  },
});