Расширить / псевдоним css класс из сторонней библиотеки - PullRequest
Новая
       0

Расширить / псевдоним css класс из сторонней библиотеки

2 голосов
/ 20 февраля 2020

Я использую Material Lite для проекта. Я делаю рендеринг на стороне сервера (SSR) следующим образом: 

'use strict';

import * as fs from 'fs';
import * as path from "path";

const cssFile = path.resolve(__dirname + '/../../css/signup-confirm.css');
const style = fs.readFileSync(cssFile);
const sharedCssFile = path.resolve(__dirname + '/../../css/shared.css');
const sharedStyle = fs.readFileSync(sharedCssFile);
const materialCSS = fs.readFileSync(path.resolve(__dirname + '/../../css/material.css'));
const materialJS = fs.readFileSync(path.resolve(__dirname + '/../../assets/material.js'));

export default (email: string, hasMaterialJS?: boolean, hasMaterialCSS?: boolean) => `

<html lang="en">
  <head>
    <style type="text/css">
      ${hasMaterialCSS? '' : materialCSS}
    </style>
    <script type="application/javascript">
      ${hasMaterialJS ? '' : materialJS}
    </script>
    <style type="text/css">
      ${sharedStyle}
    </style>
    <style type="text/css">
      ${style}
    </style>

    <title>Finish Signup</title>
  </head>

  <div>Signup Confirm</div>

  <script type="application/javascript">
    const handleOnSubmit = e => {
      e.preventDefault();
      console.log(e.target);
    };
  </script>

  <div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">
      <form onsubmit="handleOnSubmit(event)">
        <div class="mdl-textfield mdl-js-textfield">
          <label class="mdl-textfield__label">Email Address: ${email}</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield"></div>
        <div class="mdl-textfield mdl-js-textfield">
          <label class="mdl-textfield__label">Password</label>
          <input
            class="mdl-textfield__input"
            id="password-id"
            type="password"
            placeholder="Enter password"
          />
        </div>
        <div class="mdl-textfield mdl-js-textfield">
          <label class="mdl-textfield__label">Confirm Password</label>
          <input
            class="mdl-textfield__input"
            id="password-confirmed-id"
            type="password"
            placeholder="Confirm password"
          />
        </div>
        <button
          class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
        >
          Submit
        </button>
      </form>
    </div>
    <div class="mdl-layout-spacer"></div>
  </div>
</html>`

в моем общем файле. css, я хочу присвоить псевдонимам классов Material css что-то более короткое, поэтому HTML не так шумно: 

.cp-input {
  @extend .mdl-textfield__input;
}

.cp-label {
  @extend .mdl-textfield__label;
}

.cp-button {
  @extend .mdl-button;
  @extend .mdl-js-button;
  @extend .mdl-button--raised;
  @extend .mdl-js-ripple-effect;
  @extend .mdl-button--accent;
}

.cp-form-field-div {
  @extend .mdl-textfield .mdl-js-textfield;
}

но ни одна из этих CSS "псевдонимов" не работает ... Я пытаюсь заставить мой HTML выглядеть так: 

<html lang="en">
<head>
  <style type="text/css">
    ${hasMaterialCSS? '' : materialCSS}
  </style>
  <script type="application/javascript">
    ${hasMaterialJS ? '' : materialJS}
  </script>
  <style type="text/css">
    ${sharedStyle}
  </style>
  <style type="text/css">
    ${style}
  </style>

  <title>Finish Signup</title>
</head>

<div>Signup Confirm</div>

<script type="application/javascript">
  const handleOnSubmit = e => {
    e.preventDefault();
    console.log(e.target);
  };
</script>

<div class="mdl-grid">
  <div class="mdl-layout-spacer"></div>
  <div class="mdl-cell mdl-cell--4-col">
    <form onsubmit="handleOnSubmit(event)">
      <div class="cp-form-field-div">
        <label class="cp-label">Email Address: ${email}</label>
      </div>
      <div class="cp-form-field-div"></div>
      <div class="cp-form-field-div">
        <label class="cp-label">Password</label>
        <input
                class="cp-input"
                id="password-id"
                type="password"
                placeholder="Enter password"
        />
      </div>
      <div class="cp-form-field-div">
        <label class="cp-label">Confirm Password</label>
        <input
                class="cp-input"
                id="password-confirmed-id"
                type="password"
                placeholder="Confirm password"
        />
      </div>
      <button
              class="cp-button"
      >
        Submit
      </button>
    </form>
  </div>
  <div class="mdl-layout-spacer"></div>
</div>
</html>

Кто-нибудь знает, как это сделать? Обратите внимание, что Материал работает как есть, но когда я пытаюсь создать псевдонимы / расширения, это не так. Библиотека материалов всегда загружается - и загружается до моего общего файла. css. Обратите внимание, что функция экспорта по умолчанию просто возвращает строку шаблона ES6.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...