@lexstile

Как настроить webpack 5 для миксинов scss?

637c81762d595673072158.png
webpack.config.js
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: [/node_modules/],
      },
      {
        test: /\.(css)$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportGlobals: true,
                localIdentName: '[local]--[hash:base64:5]',
                auto: /\.module\.\w+$/i,
              },
            },
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    autoprefixer({
                      browsers: ['> 0%'],
                    }),
                  ],
                ],
              },
              // TODO: только dev
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              // name: 'images/[hash]-[name].[ext]',
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },

package.json
"devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/eslint-plugin": "^7.17.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@tanstack/react-query-devtools": "^4.0.10",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "dotenv": "^16.0.1",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "lint-staged": "^13.0.2",
    "mini-css-extract-plugin": "^2.6.1",
    "node-sass": "^7.0.1",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "postcss-custom-properties": "^12.1.8",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^7.0.0",
    "postcss-mixins": "^9.0.4",
    "postcss-prefixer": "^2.1.3",
    "prettier": "^2.7.1",
    "sass-loader": "^13.0.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  },


UPD: в общем, миксины работают - не работает интерполяция - не могу понять, почему.
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы