No definition found

[NguyenBenny]

When I place the cursor on a value of className (e.g. btn) in the TSX file and press F12 I get 'no definition found for 'btn'.

What gives ?

[pucelle]

Could you provide me some code snippets? both of tsx and css files.

[NguyenBenny]

This is just some sample code I was trying CSS Navigation with. The CSS used is bootstrap. VS Code version 1.84.0

import React, { Component } from "react";

class Home extends Component { render() { const { user } = this.props;

const biggerLead = {
  fontSize: 1.4 + "em",
  fontWeight: 200,
};

return (
  <div className="container text-center">
    <div className="row justify-content-center">
      <div className="col-10 col-md-10 col-lg-8 col-xl-7">
        <div
          className="display-4 text-primary mt-3 mb-2"
          style={{
            fontSize: 2.8 + "em",
          }}
        >
          Meeting Log
        </div>
        <p className="lead" style={biggerLead}>
          This simple app creates meetings, allows people to check in, and
          picks random users to award giveaways. It's a good example of a
          Single Page Application which includes connection to a database
          and routing. It's a practical way to learn{" "}
          <a href="https://reactjs.org/">React</a> with{" "}
          <a href="https://firebase.google.com">Firebase</a>.
        </p>

        {user == null && 
          <span>
            <a href="/register" className="btn btn-outline-primary mr-2">
              Register
            </a>
            <a href="/login" className="btn btn-outline-primary mr-2">
              Log In
            </a>
          </span>
        }
        {user && 
          <a href="/meetings" className="btn btn-primary">
            Meetings
          </a>
        }
      </div>{" "}
      {/* columns */}
    </div>
  </div>
);

} }

export default Home;

[pucelle]

Thanks, will check it soon.

[pucelle]

Sorry for replying late. I guess the definition cant be found because of you put your CSS library under node_modules. By default, this plugin will not search any contents under node_modules, except you import them to current file. Otherwise you may change alwaysIncludeGlobPatterns setting to be like node_modules/bootstrap/** to force load them to plugin.