小编Mad*_*rip的帖子

如何使用 Create-React-App 为 sass-resources-loader 设置 Webpack?

我想用 CSS 模块 + SASS 构建一个项目。我想要一些全局样式(mixins、变量、函数等),这些样式在每个 component.module.scss 中都可用。为此,我需要将全局样式导入到每个模块样式文件中。由于我预计会有很多组件,因此我一直在寻找自动执行此操作的选项。我发现sass-resourcess-loader可能会有所帮助。

然而,由于我没有任何使用 Webpack 的经验,所以我在设置它时遇到了麻烦。

到目前为止我做了什么:

  1. 使用create-react-app创建了我的 React 应用程序
  2. 安装了node-sasssass-resources-loader
  3. 在我的项目文件夹/node_modules/react-scripts/webpack.config.js 的第595行中,我添加了

{ 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 文件中仍然出现未定义的变量。

我究竟做错了什么?或者有其他方法可以解决这个问题吗?

css sass reactjs webpack webpack-4

4
推荐指数
1
解决办法
6460
查看次数

源有 2 个元素,但目标仅允许 1 个。打字稿扩展运算符

我正在尝试传播数组中的所有值并在我的化简器中附加一个新对象。

我的状态界面

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)

javascript typescript ecmascript-6 reactjs

3
推荐指数
1
解决办法
3538
查看次数

标签 统计

reactjs ×2

css ×1

ecmascript-6 ×1

javascript ×1

sass ×1

typescript ×1

webpack ×1

webpack-4 ×1