Как включить .css-файл в .tsx машинописный текст?

Как включить файл «css» в «tsx» и как его использовать? i.e как сделать статические файлы?Как включить .css-файл в .tsx машинописный текст?

import * as React from "react"; 
import { Header } from "./header"; 

//import "./home.css"; 


export class Home extends React.Component<{}, {}> { 
    render() { 
     return (
      <div id="page-top" className="landing-page"> 
       <Header /> 
      </div> 
     ); 
    } 
}

источник

2017-01-13 Ankit Raonka

Что вы хотите сделать с помощью css-файла? в общем случае он должен быть доступен, если вы включили его ранее в HTML – rala

, он будет работать, если я включу скрипты css в index.html bt. Я хочу использовать его в jsx в файле tsx –

Вы не можете напрямую импортировать CSS или любые другие статические файлы в машинописи, используя только машинопись компилятор, но вы можете с помощью некоторых строительных инструментов ...

Например, используя webpack, вы можете установить загрузите css-загрузчик и загрузчик стиля, чтобы найти исходный код для require('./whatever.css') и добавить его в сборку, прежде чем безопасно компилировать свой машинописный текст. Если у вас также есть веб-пакет, создающий ваш HTML-код, ваш CSS будет автоматически вводиться как таблица стилей.

источник

2017-01-13 10:13:55 alechill

, но «require» не работает в tsx, import './whatever.css', также как сделать то, что вы упоминали в последней строке –

'import' должен работать, если вы не хотите назначать его чему-либо. Если вы это сделаете (т. Е. Используя CSS-модули), то для подписи 'require', чтобы не давать вам предупреждения типа typcript, добавьте определения' @ types/node' в ваш проект. Без какой-либо конфигурации вашего сборщика сложно дать точные инструкции для достижения вашей цели - есть много ресурсов, которые помогут вам настроить веб-пакет, если вы еще этого не сделали. Требуются необходимые вам загрузчики: [css-loader] (https://github.com/webpack/css-loader) и [typecript-loader] (https://github.com/TypeStrong/ts-loader) – alechill

hey thanx я добавил css-loader и файл-загрузчик (для изображений), он работает, но как правильно использовать js-скрипты для html –

Смотрите этот ответ:

https://stackoverflow.com/a/37144690/3850405

Если вам нужно только CSS для класса компонента вы могли бы сделать это, как показано ниже. Мне нравится это решение, когда inline css не работает и нужны только небольшие изменения.

import * as React from "react"; 
import { Header } from "./header"; 

export class Home extends React.Component<{}, {}> { 
    render() { 
     const css = ` 
     .landing-page { 
      background-color: orange; 
     } 
     ` 
     return (
      <div> 
       <style> 
        {css} 
       </style> 
       <div id="page-top" className="landing-page"> 
        <Header /> 
       </div> 
      </div> 
     ); 
    } 
}

источник

2017-05-18 14:13:14 Ogglas

Если вы downvote, пожалуйста, скажите почему. – Ogglas

См. Мой ответ выше – xumix

@xumix Я не понимаю ваш нижний уровень. Ваше решение требует webpack и отвечает на вопрос о типизациях - о чем вопрос не идет. Я предоставляю ссылку на решение с webpack и даю пример без использования отдельного css-файла. – Ogglas

Я наткнулся на этот вопрос сегодня также и обнаружили, что TS теперь можно импортировать CSS непосредственно с webpack и awesome-typescript-loader точно так:

import "./home.css";

Но если вы, как я хочу использовать модули CSS , чем вам придется добавить еще несколько шагов:

npm install --save-dev typings-for-css-modules-loader
Изменение css-loader к typings-for-css-modules-loader
Измените свой WebPack конфигурации к чему-л так:

`` `

module: { 
    rules: [ 
     { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, 
     { test: /\.css$/, use: isDevBuild ? ['style-loader', "typings-for-css-modules-loader?namedExport&modules"] : ExtractTextPlugin.extract({ use: 'typings-for-css-modules-loader?minimize&namedExport&modules' }) }, 
     { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=1000' } 
    ] 
}

Это создаст типизации для CSS файлов, и вы будете иметь возможность использовать их как

import * as style from './home.css';

Вот статья, которую я использовал для моей конфигурации: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

источник

2017-11-22 09:59:40 xumix

Как включить .css-файл в .tsx машинописный текст?

ответ

Смежные вопросы