我想将纯React应用转换为NextJs应用。在React应用程序中,我正在导入。scss CSS文件在组件的多个地方。一旦我把代码移到Next中。js环境显示错误:无法从自定义以外的文件导入全局CSS。由于样式表的全局性质,为了避免冲突,请将所有第一方全局CSS导入移动到pages/_app。js。或者将导入转换为组件级CSS(CSS模块)。我希望我的CSS被导入到他们的地方作为全球CSS。任何配置在这里有帮助吗?
xoshrz7s1#
在你的下一个。js项目你有styles文件夹,其中包括global.css文件,如果你想创建特定的样式文件,并将其导入到你的文件中的任何地方,你应该将其命名为*.module.scss并将其导入到所需的目标
styles
global.css
*.module.scss
import Classes from 'styles/test.module.css'; //usange <div className={Classes.yourClassName}> </div>
kuhbmx9i2#
npm install sass import '../styles/global.scss'; import App from 'next/app'; function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default MyApp; import styles from './myComponent.module.scss'; function MyComponent() { return ( <div className={styles.myClass}> <p>Hello, world!</p> </div> ); }
2条答案
按热度按时间xoshrz7s1#
在你的下一个。js项目你有
styles
文件夹,其中包括global.css
文件,如果你想创建特定的样式文件,并将其导入到你的文件中的任何地方,你应该将其命名为*.module.scss
并将其导入到所需的目标kuhbmx9i2#