如何在Next.js应用程序中任何位置导入.scss文件？

Question

我想将纯React应用程序转换为NextJs应用程序。在React应用程序中，我在组件的多个位置导入.scss CSS文件。 一旦我将代码移动到Next.js环境中，就会显示错误：

全局CSS不能从其他文件中导入，除了您的自定义文件。由于样式表的全局性质以及为避免冲突，请将所有第一方全局CSS导入移动到pages/_app.js。或将导入转换为组件级CSS（CSS模块）。

我希望我的CSS作为全局CSS在它们的位置被导入。

有什么配置可以帮助吗？

- Shiva

---

这里有一个类似的问题，有一些很好的答案： https://dev59.com/y1IH5IYBdhLWcg3wI5zG - MickeyDickey

Answer 1

在你的 Next.js 项目中，你有一个名为 styles 的文件夹，其中包含一个名为 global.css 的文件。如果你想创建特定的样式文件并在任何文件中导入它，你应该将其命名为 *.module.scss 并将其导入到所需的目标位置。

import Classes from 'styles/test.module.css';


//usange


<div className={Classes.yourClassName}>

</div>

- Nightcrawler

---

我不能像上面那样做。这将是一个很大的变化，因为有很多需要转换的文件，而且那些类必须是全局的。 - Shiva

你想让 .scss 全局使用还是在文件中单独引入？ - vbRocks

@Cruzer为什么这些事情需要互相排斥呢？ 在我的普通React应用中，我将组件的CSS与组件放在一起。然后在这些组件中导入它们。如果我在另一个组件中也使用了同一个CSS文件中的样式，我也会在该组件中导入它。我知道在React中导入也是全局的，但这对开发人员来说是一种提示，可以理解CSS类的位置。 而这正是我希望在Next中实现的 - 不要告诉我应该从哪里导入我的全局CSS文件。 - MickeyDickey

Answer 2

//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.

- shubham yaduvanshi

---

您的答案可以通过提供更多支持信息来改善。请[编辑]以添加进一步的细节，例如引用或文档，以便其他人确认您的答案是否正确。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 3

要在 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';

注意：styles对象将包含在SCSS文件中定义的类名，您可以使用这些类名将样式应用于组件。

在组件中使用导入的样式：

您可以在JSX代码中将导入的样式用作常规CSS类。

<div className={styles.container}>
  <h1 className={styles.title}>Hello, Next.js!</h1>
</div>

在上面的例子中，容器和标题类别是在styles.scss文件中定义的。

希望能对你有所帮助 :D

- Louay Sleman

---

我想将"../styles/styles.scss"作为全局CSS导入，即 import '../styles/styles.scss';我不能像这样写{styles.container}。 - Shiva

Answer 4

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>
  );
}

- Akash Kobal