您可能需要适当的加载程序来处理此文件类型

Question

我要先设置下一个打字稿。当我在tsx文件中导入scss时，出现问题“您可能需要适当的加载程序来处理此文件类型。”

我尝试使用参数@ zeit / next-sass导出@ zeit / next-typescript。

我的代码是

1. next.config.js：

   const withTypescript = require("@zeit/next-typescript");    
   const withSass = require('@zeit/next-sass');
   
   module.exports = withTypescript(withSass())
   

2. .babelrc：

   {
    "presets": 
          ["next/babel", 
     "@zeit/next-typescript/babel"]
   }
   

3. tsconfig.json：

   {    
       "compilerOptions": {
           "allowJs": true,
           "allowSyntheticDefaultImports": true,
           "jsx": "preserve",
           "lib": ["dom", "es2017"],
           "module": "esnext",
           "moduleResolution": "node",
           "noEmit": true,
           "noUnusedLocals": true,
           "noUnusedParameters": true,
           "preserveConstEnums": true,
           "removeComments": false,
           "skipLibCheck": true,
           "sourceMap": true,
           "strict": true,
           "target": "esnext"
       }
   }
   

4. index.tsx：

   import React from 'react';
   import '../styles.scss';
   
   const index: React.FC = () => {
       return <h1 className='title'>Hello</h1>;
   };
   
   export default index;
   

5. index.js：

   "use strict";
   exports.__esModule = true;
   var react_1 = require("react");
   require("../styles.scss");
   var index = function () {
       return <h1 className='title'>Hello</h1>;
   };
   exports["default"] = index;
   

错误消息：

  

编译失败

     

./ styles.scss 1：0       模块解析失败：意外令牌（1：0）       您可能需要适当的加载程序来处理此文件类型。

     

    

.title {         |红色;         | }