如何将scss模块加载为对象？答案

【问题标题】：how to load scss module as object?如何将scss模块加载为对象？
【发布时间】：2021-02-07 20:58:39
【问题描述】：

根据Using SASS#3 默认情况下，Laravel Mix 将处理 SASS 文件的任何导入。这意味着无论何时您从“blabla.scss”导入样式，Mix 都会获取该对象并解析其 CSS。

在我的情况下，CSS 模块无法在 Laravel Mix (4.1.4)/ React 16.2.0 中正常运行

// webpack.mix.js
const mix = require('laravel-mix');

let rules = [
    {
        test: /\.ico$/,
        loaders: ['file-loader']
    }
];


mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(
        {
            module: {
                rules: rules
            }
        }
    );
mix.browserSync('localhost:8000');

我正在尝试导入这样的 SCSS 模块：我的 React 组件 Progress.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import {
    Progress as BsProgress
} from 'reactstrap';

import classes from './../../../sass/Progress.scss';

const Progress = (props) => {
    const { children, slim, className, ...otherProps } = props;
    const progressClass = classNames(className, {
        [classes['slim']]: slim
    });
    

    return (
        <BsProgress className={ progressClass } { ...otherProps }>
            { !slim && children }
        </BsProgress>
    );
};

Progress.propTypes = {
    slim: PropTypes.bool,
    className: PropTypes.string,
    children: PropTypes.node
};

export { Progress };

【问题讨论】：

标签： reactjs laravel webpack sass laravel-mix

【解决方案1】：

尝试导入 .module.scss

import classes from './../../../sass/Progress.module.scss'

【讨论】：

仍然无法加载 scss ！当我尝试打印 console.log(classes) 之类的类时，我得到一个空对象！
你在使用 create-react-app 吗？如果是这样的版本？
猜你可以试试看blog.jakoblind.no/css-modules-webpack
我尝试了很多 loaders, plugins 使用 Webpack config 但没有得到结果