0

My reactjs application is running successfully.

now I need to import css file**(style.css)**

when I run the code after adding import "./styles.css"; it displays error unexpected token.

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

}

I have followed solutions here suggested by Webars link and I have installed webpack, style-loader, and css-loader as per Mr. Webars suggestion but the error of unexpected token persist when i try to import the css files.

here is my webpack.config.js

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

here is my 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"
    }
}
Nancy Moore
  • 2,322
  • 2
  • 21
  • 38
  • Can you share your css file? May be you use any pre processor syntax there? Or you can remove its content and check if error is still there? – vicacid Jun 08 '20 at 14:45
  • If I remove the content of css file, the error will be gone. here is example of css file `.centerloader{ background:#D5D5D5; position:absolute; color:black; top:50%; left:50%; width:80%; }` – Nancy Moore Jun 08 '20 at 16:51
  • Can you provide full error message? Do you have images links (backgrounds or etc.) in your css files? – vicacid Jun 09 '20 at 10:01

0 Answers0