你可以在React中删除css类前缀吗(模块化css)

zynd9foi  于 4个月前  发布在  React
关注(0)|答案(1)|浏览(69)

我正在使用React和NextJS,我注意到当使用模块化的scss文件时,它会用文件名自动修复我的类名?
有什么方法可以禁用这个功能吗?因为它会让DOM很难阅读。
例如,在我下面的代码中,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
}

多姆

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

d4so4syb

d4so4syb1#

尝试安装此依赖项:

npm install @zeit/next-sass sass

字符串
然后更新你的nex.config.js:

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

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

相关问题