Как импортировать @ материал / тему и стиль @ материал / текстовое поле для создания собственного пакета темы - PullRequest
Новая
       30

Как импортировать @ материал / тему и стиль @ материал / текстовое поле для создания собственного пакета темы

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

Я пытаюсь создать пользовательский пакет @material/theme, содержащий пользовательские цвета и только используемые компоненты (@material/textfield/mdc-text-field в этом примере), следуя этой документации

@ mycorp / s css

переменных. S css

$primary-color: #ff742a;
$secondary-color: #ffd42a;
$text-color: #383838;
$background-color: #F6F6F6;

материал.s css

@import './variables.scss';

// Update Theme
@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $secondary-color,
  $background: $background-color,
);

// Import only Text Field
@use '@material/textfield/mdc-text-field';

index.s css

@import './variables.scss';
@import './material.scss';

Project

Я использую React и Webkit + Babel для запуска проекта, и я установил @rmwc/textfield для сгенерировать HTML.

Я импортирую свой стиль на свой app.scss, импортировав индекс пакета:

@import "@mycorps/scss/src/index.scss";

Я знаю, что все остальное работает нормально (переменные, ..), но Нет стиля для материального дизайна .

Еще одна попытка

Я также попытался заменить @use на @import, чтобы «напишите» тему текстового поля (я полагаю?), но я получил ошибку при попытке ее построить: 

ERROR in ./src/style/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./src/style/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
        on line 30 of ../../../dev/mycorps/packages/mycorps-scss/node_modules/@material/textfield/mdc-text-field.scss
        [...]
>> @include mixins.core-styles;

   ---------^

 @ ./src/style/app.scss 2:26-201
 @ ./src/index.js

Тот же результат, когда я пробовал оба решения безрезультатно:

1 Ответ

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

Обновление !! Этот ответ НЕ работает при установке как обычно .. ТОЛЬКО при использовании с npm link.

Хорошо ... Я понял это после многократной попытки.

У меня должны быть оба node-sass и sass, а также добавьте implementation: require('sass'), в webpack.config.js: 

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              sassOptions: {
                // mdc-web doesn't use sass-loader's normal syntax for imports
                // across modules, so we add all module directories containing
                // mdc-web components to the Sass include path
                // https://github.com/material-components/material-components-web/issues/351
                includePaths: glob.sync(
                  path.join(__dirname, '**/node_modules/@material')
                ).map((dir) => path.dirname(dir)),
              },
              implementation: require('sass'),
              webpackImporter: false,
            }
          },
        ],
      },
    ],
  }

I Также обновите файл material.scss: 

@use '../variables.scss';

// Update Theme
@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $secondary-color,
  $background: $background-color,
);

// Import only Text Field
@import '@material/textfield/mdc-text-field';
...