未能编译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. 卸载并重新安装节点sass

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

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

2. 重建节点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/slineariicons/linearicons免费.eot’

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

也许像这个

在webpack.config.js的module.loaders中，您必须附加以下代码：

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

Answer 2

问题不在于Sass或您的软件包安装，而是Sass无法解决字体文件的相对路径。您需要添加一个名为resolve-url-loader的加载程序来帮助Sass解析字体URL。我们不知道你的Webpack文件是什么样子的(或者你使用的是什么版本的Webpack(，但对于Webpack 4或5，它应该类似于以下内容：

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

一旦添加了resolve-url-loaderwebpack加载程序，您的Sass文件应该能够加载字体文件。

你需要安装npm软件包：

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

以下是sass-loader的Webpack文档中对此的注释：https://webpack.js.org/loaders/sass-loader/#problems-带有url。