im little bit React noobie when it comes to project setup. I have created a simple project with defaults using npx create-react-app. I wanted to use Sass so I installed a sass module. When it comes to usage, I created styles.scss with basic background styling, and tried:

function App() {
return \<div className="container"\>app\</div\>;
}

export default App;

this works fine, but I wanted to use it this way:

import styles from "./styles.scss";
function App() {
return <div className={styles.container}>app</div\>;
}
export default App;

but it doesn't work. I see that any className is given to this div. I quite don't understand why. Could anybody explain me the difference and give any tips how can I start using the second option mentioned?

CodePudding user response：

When you use the create-react-app command to generate a new React project, it sets up a webpack configuration that automatically compiles and processes SASS files, but it doesn't automatically make them available as JavaScript modules, which is what you're trying to do with the import styles from "./styles.scss" statement.

There are a few ways to work around this:

One way to make SASS files available as JavaScript modules is to install the node-sass and sass-loader modules and configure webpack to use them.

Another way is to install react-scripts-sass which is a extension for Create React App that adds support for .sass and .scss files out of the box, then you can import your scss files to your components, and use it as a className.

Both of these options will allow you to import your SASS files as JavaScript modules and use them in your React components.

Hope this helps, Let me know if you have any other question.

CodePudding user response：

If you're just trying to import a stylesheet, you should simply use:

import './styles.scss';

Of course you should also have SASS installed in your project, but I assume you already do.