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

问题描述

目前我有这个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'],],

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

谢谢

解决方法

您可以在文件中为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;
      }
    })
  )
)