css 在使用 scss 的 React 应用程序中不起作用

如何解决css 在使用 scss 的 React 应用程序中不起作用

我有一个 React 应用程序，它没有显示任何 css，即使我将它们从文件目标正确导入到组件中。这个项目也使用 scss 并且在根目录下有一个 gulpfile.js。我一般不太擅长 .css 或 .scss，因此非常感谢任何帮助...

这是我的组件 Loading.js

import React from 'react';
import classes from './loading.styles.module.css'

const Loading = ({side}) => {
    const styles = side ? {[`margin${side}`]: "1rem"} : {};
    return (
        <div className={classes["lds-ring"]} style={styles}><div></div><div></div><div></div><div></div></div>
    )
}
  
export default Loading

这里是loading.styles.module.css

.lds-ring {
    display: flex;
    align-items: center;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
}
.lds-ring div {
    Box-sizing: border-Box;
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin: 0.1rem;
    border: 0.1rem solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5,0.5,1) infinite;
    border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
} 
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

这里是theme.scss

// @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Poppins:100,200,300,500,700,800,900&display=swap');
@import '../../../node_modules/bootstrap/scss/functions';
@import 'theme/functions';
@import 'user-variables';
@import 'theme/variables';
@import '../../../node_modules/bootstrap/scss/variables';
@import '../../../node_modules/bootstrap/scss/bootstrap';

/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
@import 'theme/theme';

/*-----------------------------------------------
|   User Styles
-----------------------------------------------*/
@import 'user';

这里还有 gulpFile.js

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rtlcss = require('gulp-rtlcss');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');
const cleanCSS = require('gulp-clean-css');

/*-----------------------------------------------
|   SCSS
-----------------------------------------------*/
gulp.task('scss',() =>
  gulp
    .src('src/assets/scss/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: 'expanded'
      }).on('error',sass.logError)
    )
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ compatibility: 'ie9' }))
    .pipe(sourcemaps.write('.'))
    .pipe(plumber.stop())
    .pipe(gulp.dest('public/css'))
    .pipe(browserSync.stream())
);

gulp.task('scss:dark',() =>
  gulp
    .src('src/assets/scss/theme-dark.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: 'expanded'
      }).on('error',sass.logError)
    )
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ compatibility: 'ie9' }))
    .pipe(sourcemaps.write('.'))
    .pipe(plumber.stop())
    .pipe(gulp.dest('public/css'))
    .pipe(browserSync.stream())
);

gulp.task('scss:rtl',sass.logError)
    )
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS({ compatibility: 'ie9' }))
    .pipe(rtlcss()) // Convert to RTL.
    .pipe(rename({ suffix: '-rtl' })) // Append "-rtl" to the filename.
    .pipe(sourcemaps.write('.'))
    .pipe(plumber.stop())
    .pipe(gulp.dest('public/css'))
    .pipe(browserSync.stream())
);

/*-----------------------------------------------
|   Watching
-----------------------------------------------*/
gulp.task('watch',() => {
  gulp.watch('src/assets/scss/**/*.scss',gulp.parallel('scss','scss:rtl'));
});

gulp.task('default','scss:rtl','watch','scss:dark'));