как в каждый scss файл записать строчку @import "mixins"

Question

В файл index.js подключается файл mixins.scss и index.scss. В mixins.scss такой код:

@mixin colorRed {
   color: red;
}

в index.scss такой код:

body {
   @include colorRed;
}

есть такой webpack.config.js:

            {
            test: /\.s[ac]ss$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ]
        }

Компилиться с ошибкой, что объявлен неизвестный миксин colorRed в index.scss:

    SassError: Undefined mixin.
  ╷
3 │     @include colorRed;
  │     ^^^^^^^^^^^^^^^^^
  ╵

Логично, ведь в index.scss я не прописал импорт mixins.scss, но это тупо: отдельно прописывать в каждый файл стилей @import 'mixins', ведь я планирую использовать компонентную структуру, значит, подключать всегда придется так:

@import '../../../../../../../../mixins

но это маразм, особенно если потом компоненты будут менять свою иерархию. Я вычтал, что можно просто в каждый файл стилей через webpack динамически вставлять что-нибудь, например, заветную строчку @import 'mixins', но как это сделать я хз. Пробовла что-то такое, но не выходит:

module: {
    rules: [
        ...
        {
            test: /\.s[ac]ss$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            additionalData: '@import "mixins"',
                            includePaths: [path.join(__dirname, 'src')]
                        }
                    }
                }
            ]
        }
    ]
}

ичпользую последние версии webpack sass node.js

Answer 1

Итак, нашел я решение проблемы.

Скачиваем это https://www.npmjs.com/package/webpack-append
в шапке конфига пишем const libImport = '@import "./mixins";' (оригинал https://github.com/dumconstantin/webpack-append/issues/2#issuecomment-254129710)

Чуть меням сборку:

 module: {
 rules: [
     ...
     {
         test: /\.sсss$/i,
         use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
             'sass-loader',
             'webpack-append?'+ libImport
         ]
     }
 ]}

Убираем из index.js импорт mixins.scss

Ну и пошла жара, как говорится: создаешь сколько угодно компонентов, влкадываешь их куда угодно и все миксины прекрасно объявляются в scss файлах, компилятся и работают.

БЛОГ НА HUSL

как в каждый scss файл записать строчку @import "mixins"

Ответы (1 шт):