Javascript 配置webpack4.0错误时安装sass加载程序

我在配置webpack4.0时安装sass加载程序。介绍字体文件

有一个奇怪的错误。我想可能有冲突

错误：意外字符“@”（1:0） 您可能需要适当的加载程序来处理此文件类型

我试图解决它，但我无能为力，帮帮我

package.json

 "devDependencies": {
  ...
    "css-loader": "^2.1.1",
    "dart-sass": "^1.20.1",
    "file-loader": "^3.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
  ...
  }

webpack.config.js

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
        ...
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      },
      ...
    ]
  }

scss

我希望正确运行sass

但是

错误

app.46c6d5794b0000048c06.js:56未捕获错误：模块解析失败：意外字符“@”（1:0）
您可能需要适当的加载程序来处理此文件类型。
>@font-face{
|字体系列：“MyFont”；
|src:url（'./PingFang.ttf'）格式（'ttf'）；
在Object.lE3a（app.46c6d5794b0000048c06.js:56）
at __;网页_;需要__; _; __; _;引导：78）
at模块（index.js:1）
at Module.tjUo（app.46c6d5794b0000048c06.js:81）
at __;网页_;需要__; _; __; _;引导：78）
at Object.0（应用程序46c6d5794b0000048c06.js:11）
at __;网页_;需要__; _; __; _;引导：78）
在CheckDeferredModule（引导：45）
在Array.webpackJsonpCallback[作为推送]（引导：32）
附录46c6d5794b0000048c06.js:1
lE3a@app.46c6d5794b0000048c06.js:56
__webpack_require__@bootstrap:78
（匿名）@index.js:1
tjUo@app.46c6d5794b0000048c06.js:81
__webpack_require__@bootstrap:78
0@app.46c6d5794b0000048c06.js:11
__webpack_require__@bootstrap:78
checkDeferredModules@bootstrap:45
webpackJsonpCallback@bootstrap:32
（匿名）@app.46c6d5794b000048c06.js:1
客户端：编译时出现200[WDS]错误。阻止重新加载。
错误@client:200
onmessage@socket.js:40
EventTarget.dispatchEvent@sockjs.js:170
（匿名）@sockjs.js:887
SockJS._transportMessage@SockJS.js:885
EventEmitter.emit@sockjs.js:86
WebSocketTransport.ws.onmessage@sockjs.js:2961
客户端：209./src/style.scss 1:0
模块分析失败：意外字符“@”（1:0）
您可能需要适当的加载程序来处理此文件类型。
>@font-face{
|字体系列：“MyFont”；
|src:url（'./PingFang.ttf'）格式（'ttf'）；

谢谢。你的答案很好。但是，我改为test://\（css | scss | sass）$/，解决了这个问题。谢谢。你的答案很好。但是，我改为test://\（css | scss | sass）$/，解决了这个问题

@font-face {
  font-family: 'MyFont';
  src: url('./PingFang.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
}

app.46c6d5794b0000048c06.js:56 Uncaught Error: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @font-face {
|   font-family: 'MyFont';
|   src: url('./PingFang.ttf') format('ttf');
    at Object.lE3a (app.46c6d5794b0000048c06.js:56)
    at __webpack_require__ (bootstrap:78)
    at Module.<anonymous> (index.js:1)
    at Module.tjUo (app.46c6d5794b0000048c06.js:81)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (app.46c6d5794b0000048c06.js:11)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at app.46c6d5794b0000048c06.js:1
lE3a @ app.46c6d5794b0000048c06.js:56
__webpack_require__ @ bootstrap:78
(anonymous) @ index.js:1
tjUo @ app.46c6d5794b0000048c06.js:81
__webpack_require__ @ bootstrap:78
0 @ app.46c6d5794b0000048c06.js:11
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ app.46c6d5794b0000048c06.js:1
client:200 [WDS] Errors while compiling. Reload prevented.
errors @ client:200
onmessage @ socket.js:40
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961
client:209 ./src/style.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @font-face {
|   font-family: 'MyFont';
|   src: url('./PingFang.ttf') format('ttf');