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并将其包含在该组件中。

Adding Component-Level CSS

如何在Next Js上使用Sass和CSS

1 个答案: