首页 > 解决方案 > 无法导入 css 文件说错误意外令牌

问题描述

我的 reactjs 应用程序运行成功。

现在我需要导入 css 文件**(style.css)**

添加后运行代码时,import "./styles.css";会显示错误意外令牌

import {initializeBlock, Input, useBase, useRecords} from '@airtable/blocks/ui';
import React, { Component, useState } from "react";
import ReactDOM from 'react-dom';
import "./styles.css";

class Access extends React.Component {

//content goes here

}

我遵循了Webbars 链接建议的解决方案,并且 按照Webbars 先生的建议 安装了webpack、style-loader 和 css-loader ,但是当我尝试导入 css 文件时,意外令牌的错误仍然存​​在。

这是我的 webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

这是我的 package.json

{
    "dependencies": {
        "@airtable/blocks": "0.0.51",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-js-pagination": "^3.0.3",
        "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
        "css-loader": "^3.5.3",
        "eslint": "^6.8.0",
        "eslint-plugin-react": "^7.18.3",
        "eslint-plugin-react-hooks": "^2.5.0",
        "style-loader": "^1.2.1",
        "webpack": "^4.43.0"
    },
    "scripts": {
        "lint": "eslint frontend"
    }
}

标签: reactjs

解决方案


推荐阅读