2

I've installed an app using CRA and want to use SASS with it (I'm a new one in SASS installation and familiar with syntax)
Currently, I have this folders structure:

|── 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

I want to declare some mixins inside the _media.scss file that will be used globally, for example, media queries. Then I want to @import 'media' inside the abstract and @import abstract inside style.scss (I'm doing it to have all variables/mixins available globally) style.scss is imported inside 'src/index.js' file.

Let's go to the Example component. There I have an Example.style.scss file, where I'm trying to use a mixin <mixin_name> I'm receiving an error:

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

File Example.style.scss is imported inside Example.component.js (I prefer it since it is easier to import every file relatively close instead of importing each scss file in the style.scss).

I've read that to implement my needs I should install sass-resources-loader, so I've installed it and my webpack.config.js is:

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",
        "...",
    ],
},
};

My 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"
  }
}

What should I do to configure my setup?

Andrii Antoniuk
  • 73
  • 8
  • @Andril Antoniuk I am having the same issue on an Angular project. Did you solve this? - https://stackoverflow.com/questions/76068047/import-custom-mixin-fails-angular-15-bootstrap-5 – RooksStrife Apr 20 '23 at 20:53
  • @RooksStrife I have solved it for myself with my own npm module, but I think this isn't relevant for you since it`s craco related https://www.npmjs.com/package/craco-sass-loader – Andrii Antoniuk Apr 23 '23 at 14:02

1 Answers1

0

A slight guess here but if you import style.scss into index.js it should make those mixins available to all components (assuming index.js is your entry file for the application)

import './React/style/style.scss

Adam
  • 1
  • 2