Sass未定义的混合错误 - 如何首先加载主样式文件

Question

我已经使用 CRA 安装了一个应用程序并想使用 SASS（我是 SASS 安装的新手并且熟悉语法）
目前，我有这个文件夹结构：

|── package.json
|
├── README.md
├── src
│   |
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── React
│       ├── component
│       │   ├── Example
│       │       ├── Example.component.js
│       │       ├── Example.container.js
│       │       ├── Example.style.scss
|       |   
|       |
│       └── style
│           ├── abstract
│           │   ├── _abstract.scss
│           │   └── _media.scss
│           ├── _reset.scss
│           └── style.scss
|
├── webpack.config.js
└── yarn.lock

我想在_media.scss文件中声明一些将在全局范围内使用的 mixin，例如媒体查询。 然后我想@import 'media'在abstract中，@import @import abstract在style.scss （我这样做是为了让所有变量/mixins 全局可用） style.scss被导入到 'src/index.js' 文件中。

让我们转到Example组件。 我有一个Example.style.scss文件，我在其中尝试使用 mixin <mixin_name>我收到一个错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

文件Example.style.scss被导入到 Example.component.js 中（我更喜欢它，因为它更容易导入每个相对接近的文件，而不是导入 style.scss 中的每个style.scss文件）。

我已经读过，为了满足我的需求，我应该安装sass-resources-loader ，所以我已经安装了它，我的webpack.config.js是：

module.exports = {
module: {
    rules: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: "style-loader",
                },
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 1,
                    },
                },
                {
                    loader: "postcss-loader",
                },
            ],
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                "postcss-loader",
                "sass-loader",
                {
                    loader: "sass-resources-loader",
                    options: {
                         resources: [
                            "./src/React/style/abstract/_media.scss",
                            "./src/React/style/style.scss",
                        ],
                    },
                },
            ],
        },
    ],
},
resolve: {
    extensions: [
        ".tsx",
        ".js",
        ".tsx",
        ".jsx",
        ".style.scss",
        ".scss",
        "...",
    ],
},
};

我的package.json ：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@lagunovsky/redux-react-router": "^3.2.0",
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.1",
    "history": "^5.3.0",
    "html-react-parser": "^2.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "resolve-typescript-plugin": "^1.2.0",
    "sass": "^1.53.0",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^4.1.0",
    "postcss": "^8.4.14",
    "postcss-focus": "^5.0.1",
    "postcss-hover-media-feature": "^1.0.2",
    "sass-resources-loader": "^2.2.5",
    "stylelint": "^14.9.1"
  }
}

我应该怎么做才能配置我的设置？

Answer 1

这里有一个小小的猜测，但如果你将 style.scss 导入 index.js 它应该使这些 mixin 可用于所有组件（假设 index.js 是你的应用程序的入口文件）

import './React/style/style.scss