时间戳

首页 > 解决方案 > NextJS 无法使用使用 SASS 和 CSS 的库

javascript - NextJS 无法使用使用 SASS 和 CSS 的库

问题描述

我正在尝试在我的 NextJS 项目中添加 wix-style-react 插件，但我无法构建。在他们的文档中，他们说他们使用 Stylable、SASS 和 CSS 模块。

当我安装插件并构建时，我收到以下错误：

模块解析失败：意外字符 '@' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders @import '../common';

我尝试了以下两种方法：

  1. 在我的内部使用 next-sassnext.config.js
// next.config.js
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true
})

这样我收到另一个错误警告我关于 .css 文件

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders .root { | 显示：内联块；| 文本溢出：省略号；

  1. 将 next-css 与 next-sass 结合使用
// next.config.js
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css')

module.exports = withCss(
  withSass({
    cssModules: true,
  })
)

使用此配置，我再次遇到与没有配置相同的错误。我试图按照这个来配置我的 webpack。但我有一个错误StylableWebpackPlugin is not a constructor

重现

  1. 创建一个新的空白项目create-next-app
  2. 安装模块yarn add wix-style-react
  3. 建造yarn build

系统信息

标签： javascriptreactjswebpacknext.js

解决方案

配置

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
module.exports = withCSS({
    webpack: function(config) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000
            // name: '[name].[ext]'
          }
        }
      });
      return config;
    },
    ...withSass({
      cssModules: true,
      webpack: function(config) {
        config.module.rules.push({
          test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 100000
              // name: '[name].[ext]'
            }
          }
        });
        return config;
      }
    }),
    cssModules: false
  });

推荐阅读