未找到模块：错误：Can'；t解析'/@fortawesome/fontawesome free/css/fontawesome.css'；

我试图在第4页中使用font awesome 5.1.0。 网页包配置文件的内容：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ["./src/index.js", "./src/index.scss", "react-hot-loader/patch"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "bundle.css"
            }
          },
          { loader: "extract-loader" },
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer({ grid: false })]
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name][hash].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new CopyWebpackPlugin([
      {
        from: "public"
      }
    ])
  ]
};

在index.scss文件中：

@import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@material/button/mdc-button.scss";
@import "@material/drawer/mdc-drawer.scss";
@import "@material/top-app-bar/mdc-top-app-bar.scss";
@import "@material/list/mdc-list.scss";
@import "./App/scss/app.scss";


* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

#root {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

如图所示：

字体awesome从正确的位置导入，但我遇到了编译器错误：

ERROR in ./src/index.scss
Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css' in '/home/developer/Desktop/reasonreact/cockpit/src'
 @ ./src/index.scss
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch   

我做错了什么

更新

我将网络配置更改为：

  {
    test: /\.(sass|scss)$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "bundle.css"
        }
      },
      { loader: "extract-loader" },
      {
        loader: "css-loader"
      },
      {
        loader: "postcss-loader",
        options: {
          plugins: () => [autoprefixer({ grid: false })]
        }
      },
      {
        loader: "sass-loader",
        options: {
          includePaths: ["./node_modules", "src", "."]
        }
      }
    ]
  },

我有以下错误：

ERROR in ./src/index.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: require is not defined
    at runLoaders (/home/developer/Desktop/reason-react/cockpit/node_modules/webpack/lib/NormalModule.js:300:13)
    at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch

---

这条导入路径似乎一团糟

ERROR in ./src/index.scss
Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css' in '/home/developer/Desktop/reasonreact/cockpit/src'
 @ ./src/index.scss

它不是在你的node_modules文件夹中寻找fortawesome

是否可以显式地尝试从node_模块导入它

例如

@import "../path/to/node_modules/@fortawesome/fontawesome-free/css/fontawesome.css";

另外，我认为它不在node_模块中查找的原因是webpack需要有一个SASS loader配置条目，您有一个，但我很好奇，路径中的点符号是否会以某种方式将webpack丢弃。你也能试试下面的吗

   /**
   * Config sassLoader paths for imports from node_modules
   */
  sassLoader: {
    includePaths: [
      'node_modules', 'src', '.'
    ]
  },

---

您可能只是忘记在加载程序中包含

css

文件：

---

test://\（sass | scss | css）$/，

（因为您尝试导入Fontsome.css，但不是scss）

在终端中运行“npm审核修复程序”修复了我的问题

有点晚了，但可能对某人有所帮助：

我想不是

@import "@fortawesome/fontawesome-free/css/fontawesome.css";

应该是

@import '~@fortawesome/fontawesome-free/css/fontawesome.css';

我也有同样的问题

网页包css加载程序不支持（SCS和.css绑定）您需要sass来执行

只需安装sass加载器和节点sass（阅读说明）

网页包

module.exports = {
  module: {
    rules: [
        {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'<--------------------this is you need----------------
        ]
      }
    ]
  },
  // plugin omitted
}

我也为您附上我的网页（供参考） 我使用了vue框架

const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [{
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.(sass|scss|css)$/,
                use: ['vue-style-loader', 'css-loader','sass-loader'],
              
            },
           
        ]
    },
    devServer: {
        open: true,
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // resolve: {
    //     alias: {
    //       vue$: "vue/dist/vue.runtime.esm.js",
    //     },
    //     extensions: ["*", ".js", ".vue", ".json"],
    //   },
}

---

太棒了？听起来很酷！没有打字错误。请看文件夹结构。

npm install -D node-sass
npm install -D sass-loader@^10 

const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [{
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.(sass|scss|css)$/,
                use: ['vue-style-loader', 'css-loader','sass-loader'],
              
            },
           
        ]
    },
    devServer: {
        open: true,
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // resolve: {
    //     alias: {
    //       vue$: "vue/dist/vue.runtime.esm.js",
    //     },
    //     extensions: ["*", ".js", ".vue", ".json"],
    //   },
}