将 css 加载程序添加到 next.config.js

Question

目前我有这个 next.config.js:

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
}

module.exports = withCSS(
  withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  )
)

我正在尝试使用 react-rce 但在 the docs 他们说我需要在我的 webpack 配置中添加一个 style-loader。

例如

 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

但我不知道如何将它添加到我当前的文件中。有什么想法吗？

谢谢

Answer 1

您可以像这样在您的文件中为 css-loader 添加额外的模块规则：

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require('@zeit/next-sass')

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
}

module.exports = withCSS(
  withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
      webpack: config => {
        config.module.rules.push(
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          }
        );
        return config;
      }
    })
  )
)

将 css 加载程序添加到 next.config.js

Add css loader to next.config.js

webpack

next.js

webpack-style-loader