如何将scss模块作为对象加载

Question

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

在我的情况下，CSS模块无法使用Laravel Mix(4.1.4(/Rect 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 };

Answer 1

只需尝试导入.module.scss

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