Включить `бурбон` из файла S CSS (веб-пакет) - PullRequest
Новая
       25

Включить `бурбон` из файла S CSS (веб-пакет)

0 голосов
/ 04 марта 2020

Я пытаюсь заставить бурбон (пакет для S CSS mixins et c.), node-sass и webpack работать в гармонии.

После запуска команды сборки webpack я получаю следующую ошибку: 

ERROR in ./src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named transform
        on line 12 of /home/navix/code/unsub-page/src/sass/style.scss
>>   @include transform(translate(-50%, -50%));

Обратите внимание, что webpack не жалуется на @import. Глядя на папку сборки, скомпилированный CSS действительно содержит только код нормализации. css.

Настройка

У меня установлены следующие пакеты :

  • бурбон
  • node-sass
  • css -loader
  • style-loader
  • sass-loader
  • webpack
  • webpack-cli
  • webpack-dev-server
  • post css -loader
  • autoprefixer
  • html -webpack-plugin
  • mini- css -extract-plugin

Моя запись JS Файл просто импортирует normalize.css и мой пользовательский style.scss. Файл S CSS содержит простую настройку для тестирования бурбона: 

@import 'bourbon';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300');

body {
  height: 100%;
  font-size: 16px;
  background: #1d77ef;
}

.select-ctr {
  @include position(absolute, 50% x x 50%);
  @include transform(translate(-50%, -50%));
}

Это мой CSS конвейер: 

test: /\.(sa|sc|c)ss$/,
use: [
  {
    loader: MiniCssExtractPlugin.loader
  },
  {
    loader: 'css-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [require('autoprefixer')()]
    }
  },
  {
    loader: 'sass-loader',
    options: {
      sassOptions: {
        indentWidth: 4,
        includePaths: [require('bourbon').includePaths]
      }
    }
  }
]

1 Ответ

0 голосов
/ 04 марта 2020

Похоже, что Бурбон удалил ряд префиксных функций в v5, включая transform миксин.

Если вам повезет, вы сможете заставить его работать, заменив любой экземпляр этого в вашем коде: 

@include transform(translate(-50%, -50%));

… этим: 

transform: translate(-50%, -50%);
...