install sass-loader when config webpack4.0 error

Question

I install sass-loader when config webpack4.0. Introduce font file.

There was a strange bug.I guess there may be a conflict.

error:Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

I tried to solve it, but I could do nothing, help me.

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

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

I hope to run sass correctly.

but

error

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');