如何在 Next Js 上使用 Sass 和 Css

Question

我一直在尝试在 next.config.js 中使用 sass 和 css 模块，但不断遇到此错误：

Failed to compile.

./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css
Unknown word (1:1)

> 1 | var api = require("!../../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../../../../../css-loader/index.js!./index.css");
  3 | 
  4 |             content = content.__esModule ? content.default : content;

在 github 和 stackoverflow 上阅读之后，这听起来像是因为我的 next.config.js 中有两个 css 模块配置实例，但我不确定如何将其减少到一个，同时仍然保持此逻辑不变：

      config.module.rules.push({
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      });

下面是我完整的 next.config.js

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

const aliasPathsToResolve = [
  {
    name: 'react-ui',
    path: path.resolve(__dirname, './node_modules/@riskalyze/react-ui/')
  },
  {
    name: '@babel/runtime-corejs2',
    path: path.resolve(__dirname, './node_modules/@babel/runtime-corejs2/')
  }
];

module.exports = withCSS(
  withSass({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    },
    webpack: (config, { defaultLoaders }) => {
      config.module.rules.push({
        test: /\.+(js|jsx|ts|tsx)$/,
        loader: defaultLoaders.babel,
        include: /react-ui/
      });

      config.module.rules.push({
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      });

      aliasPathsToResolve.forEach(module => {
        config.resolve.alias[module.name] = module.path;
      });

      return config;
    }
  })
);

Answer 1

您可以在具有内置 Sass 支持的 Next.js 项目中使用 Sass。

无需配置，只需安装 Sass 包即可：

npm i sass

Next.js 将看到此依赖项并启用内置 Sass 加载器。

您可以在 中包含全局样式/pages/_app.js。

对于组件或页面特定的 Sass 文件，您可以使用 CSS 模块的内置支持。

例如，如果您有一个组件，Button.js您可以创建一个 Sass 文件button.module.scss并将其包含在该组件中。

添加组件级 CSS