在 React App 中连接 styles.scss 的问题

Question

I am having an issue with my React App connecting style.scss file. I think everything looks good to me on webpack a package.json but for some reason, it doesn't wanna works.

App.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./module.scss";

import Header from "../src/components/Header";

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Header />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Header.js:

import React from "react";

class Header extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <section className="header">
        <div className="current-location">London</div>
        <div className="time">00:00 GMT</div>
        <div className="current-temp">23</div>
        <div className="reloading">Reloading</div>
        <div className="count-bar">seconds</div>
      </section>
    );
  }
}

export default Header;

Webpack.js:

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s(a|c)ss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
}

package.json:

"dependencies": {
  "@babel/core": "^7.9.6",
  "@babel/preset-env": "^7.9.6",
  "@babel/preset-react": "^7.9.4",
  "@webpack-cli/serve": "^0.2.0",
  "babel-loader": "^8.1.0",
  "body-parser": "^1.19.0",
  "css-loader": "^3.5.3",
  "dotenv-webpack": "^1.8.0",
  "express": "^4.17.1",
  "html-webpack-plugin": "^4.3.0",
  "node-sass": "^4.14.1",
  "promise": "^8.1.0",
  "react-html-id": "^0.1.5",
  "sass": "^1.26.5",
  "sass-loader": "^8.0.2",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.11.0"
},
"devDependencies": {
  "axios": "^0.19.2",
  "file-loader": "^6.0.0",
  "heroku": "^7.41.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-router-dom": "^5.2.0",
  "style-loader": "^1.2.1",
  "url-loader": "^4.1.0"
}

Does anyone have an idea what is wrong here? The Header is correctly rendered on App.js but I can't understand why style is not getting applied to. Thanks!

Answer 1

Try this configuration:

{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader'],
},
{
  test: /\.s(a|c)ss$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
        // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
        importLoaders: 1,
        // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
        modules: { auto: true },
      },
    },
    {
      loader: 'sass-loader',
    },
  ],
},

Reference: webpack

Answer 2

Try doing this:

replace

import './module.scss'

with

import style from './module.scss'

And use classes as variables like className={style.time} instead of className="time"