无法编译 Node-sass 不工作错误

Question

我正在尝试运行一个已经制作好的 react.js 项目。

我已经安装了npm install 。

但我每次都面临错误。

./src/assets/base.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1.?/node_modules/postcss-loader/src?.postcss??/node_modules/resolve-url-loader..ref--5-oneOf-6-3??/node_modules/sass-loader/dist/cjs.js.:ref--5-oneOf-6-4../src/assets/base.scss) Error: Can't resolve './components/icons/components/icons/linearicons/Linearicons-Free.eot' in '/home/arsalan/Desktop/libra/FrontEnd-main/src/assets'

我已经完成了研究并已经完成了以下解决方案。

1. 卸载并重新安装 node-sass

    npm uninstall node-sass; npm install node-sass@4.14.1

从此 URL [与我的错误相关的堆栈溢出 URL][1]

2. 重建 node-sass

    npm rebuild node-sass

3. 删除 node_module 并重新安装

    remove node_modules folder and run npm install

从此 URL [与我的错误相关的堆栈溢出 URL][2]

还尝试了以下。

npm install --save node-sass

但这些都不适合我。 谁能指导我哪里错了？

Answer 1

错误：无法解析“./components/icons/components/icons/linearicons/Linearicons-Free.eot”

您似乎没有使用 webpack 插件、文件加载器或 url-loader 声明这些文件。

也许像这样

在您的 webpack.config.js 中，在 module.loaders 中，您必须使用 append 此代码：

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

Answer 2

问题不在于 Sass 或您的 package 安装，而是 Sass 无法解析字体文件的相对路径。 您需要添加一个名为resolve-url-loader来帮助 Sass 解析字体 URL。 我们不知道您的 Webpack 文件是什么样的（或者您使用的是什么版本的 Webpack），但是 Webpack 应该类似于： 4

{
    test: /\.scss$/,
    loaders: [
        'style-loader',
        'css-loader',
        'resolve-url-loader', // add this before sass-loader
        'sass-loader',
    ]
},

添加resolve-url-loader webpack 加载程序后，您的 Sass 文件应该能够加载字体文件。

您需要安装 npm package ：

npm install resolve-url-loader --save-dev 

这是sass-loader的 Webpack 文档中对此的说明： https://webpack.js.org/loaders/sass-loader/#problems-with-url 。