我想用 CSS 模块 + SASS 构建一个项目。我想要一些全局样式(mixins、变量、函数等),这些样式在每个 component.module.scss 中都可用。为此,我需要将全局样式导入到每个模块样式文件中。由于我预计会有很多组件,因此我一直在寻找自动执行此操作的选项。我发现sass-resourcess-loader可能会有所帮助。
然而,由于我没有任何使用 Webpack 的经验,所以我在设置它时遇到了麻烦。
到目前为止我做了什么:
{ test: /.scss$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "sass-loader", }, { loader: "sass -资源加载器", } ], }
抱歉,我无法以某种方式正确设置该代码片段的样式。我也尝试过选项字段:
options: {
resources: "./src/global.scss"
}
Run Code Online (Sandbox Code Playgroud)
但没有任何效果,我的模块化 scss 文件中仍然出现未定义的变量。
我究竟做错了什么?或者有其他方法可以解决这个问题吗?
我正在尝试传播数组中的所有值并在我的化简器中附加一个新对象。
我的状态界面:
export interface IBasketState {
products: [
{
id: number | undefined;
name: string;
smallQ: number; //small packages quantity
smallTotalP: number; //price for all small packages
largeQ: number; //large packages quantity
largeTotalP: number; //price for all large packages
orderPrice: number; //total price of this order
}
];
totalPrice: number;
}
Run Code Online (Sandbox Code Playgroud)
减速机添加项功能:
const BasketReducer = (basketState: IBasketState, action: IBasketAction): IBasketState => {
//ADD ITEM
if (action.type === "Add item") {
const { id, name, smallQ, smallP, largeQ, …Run Code Online (Sandbox Code Playgroud)