我想将纯React应用程序转换为NextJs应用程序。在React应用程序中,我在组件的多个位置导入.scss CSS文件。 一旦我将代码移动到Next.js环境中,就会显示错误:
全局CSS不能从其他文件中导入,除了您的自定义文件。由于样式表的全局性质以及为避免冲突,请将所有第一方全局CSS导入移动到pages/_app.js。或将导入转换为组件级CSS(CSS模块)。
我希望我的CSS作为全局CSS在它们的位置被导入。
有什么配置可以帮助吗?
我想将纯React应用程序转换为NextJs应用程序。在React应用程序中,我在组件的多个位置导入.scss CSS文件。 一旦我将代码移动到Next.js环境中,就会显示错误:
全局CSS不能从其他文件中导入,除了您的自定义文件。由于样式表的全局性质以及为避免冲突,请将所有第一方全局CSS导入移动到pages/_app.js。或将导入转换为组件级CSS(CSS模块)。
我希望我的CSS作为全局CSS在它们的位置被导入。
有什么配置可以帮助吗?
styles
的文件夹,其中包含一个名为 global.css
的文件。如果你想创建特定的样式文件并在任何文件中导入它,你应该将其命名为 *.module.scss
并将其导入到所需的目标位置。
import Classes from 'styles/test.module.css';
//usange
<div className={Classes.yourClassName}>
</div>
//In Next.js, the recommended approach for importing global CSS is to move the imports to the _app.js file. However, if you want to keep importing CSS files in their respective components as global styles, you can configure Next.js to allow this behavior. Here's how you can do it:
//- Install the next-transpile-modules package as a development dependency:
npm install --save-dev next-transpile-modules
//- Create a next.config.js file in the root of your project (if it doesn't already exist).
//- Inside next.config.js, add the following configuration:
const withTM = require('next-transpile-modules')(['your-css-module']); //
// Replace 'your-css-module' with the path to your CSS module
module.exports = withTM({
webpack(config) {
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
});
return config;
},
});
// - Replace 'your-CSS-module' in the configuration above with the path to your CSS module(s). For example, if your CSS files are located in the styles folder at the root of your project, you can replace 'your-CSS-module' with './styles'.
//- Restart your Next.js development server for the changes to take effect
//By transpiling the CSS module(s) using next-transpile-modules, you can import global CSS files in your components as you did in your React app.
//Keep in mind that using global CSS can make it harder to maintain styles and can cause conflicts, especially when working on larger projects. It's generally recommended to follow Next.js conventions and use component-level CSS (CSS modules) whenever possible.
要在 Next.js
应用程序的任何位置导入 .scss
文件,您可以按照以下步骤进行:
安装必要的依赖项:
sass
或 node-sass
:这是将 SCSS 文件编译为 CSS 所需的。
@zeit/next-sass 或 next-sass:这是一个 Next.js 插件,允许导入 SCSS 文件。
您可以使用 npm 或 yarn 安装这些依赖项。以下是使用 npm 的示例:
npm install sass @zeit/next-sass
配置 Next.js 应用程序以使用 SCSS 插件:
1- 如果尚不存在,请在项目的根目录中创建 next.config.js 文件。
2- 打开 next.config.js 文件并添加以下代码: javascript
const withSass = require('@zeit/next-sass');
module.exports = withSass({
/* additional configuration options here */
});
创建一个 SCSS 文件:
在你的项目中创建一个 .scss 文件。例如,你可以在 styles 目录下创建一个名为 styles.scss 的文件。 在组件中导入 SCSS 文件:
在你的 React 组件中,你可以使用相对路径导入 SCSS 文件。例如:
import styles from '../styles/styles.scss';
<div className={styles.container}>
<h1 className={styles.title}>Hello, Next.js!</h1>
</div>
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>
);
}