如何在.tsx打字稿中包含.css文件？

如何在「tsx」中包含「css」文件以及如何使用它？即我如何呈現靜態文件？如何在.tsx打字稿中包含.css文件？

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

它包括它，它將工作，如果我在index.html中包含css腳本bt我想在tsx文件中使用它在jsx –

您不能直接導入CSS或僅使用打字稿編譯任何其他靜態文件爲打字稿，但你可以用一些構建工具的幫助......

例如使用webpack，您可以設置使用css-loader和style-loader來搜索源代碼require('./whatever.css')並在安全編譯打字稿之前將其添加到版本中。如果你還有webpack生成你的HTML，那麼你的CSS將被自動注入爲樣式表。

來源

2017-01-13 10:13:55 alechill

但'require'在tsx中不起作用，導入'./whatever.css'的作品，也是如何做到你在最後一行提到的 –

'import'應該可以工作，只要你不想把它分配給任何東西。如果你這樣做（即如果使用CSS模塊），那麼對'require'的簽名不給你打字稿警告，將'@ types/node'定義添加到你的項目中。沒有你的任何構建配置，很難給出精確的指示來實現你的目標 - 如果你還沒有足夠的資源可以幫助你建立webpack。你需要的裝載器需要[css-loader]（https://github.com/webpack/css-loader）和[typescript-loader]（https://github.com/TypeStrong/ts-loader） – alechill

嘿thanx我添加了CSS加載器和文件加載器（用於圖像），它的工作原理，但如何將js腳本自動服務到HTML –

看到這個答案：

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

如果你只需要CSS在你的組件類，你可以不喜歡它的下面。我喜歡這種解決方案，當內聯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我不明白你的downvote。您的解決方案需要webpack並回答關於類型的問題 - 問題不在於此。我提供了一個帶有webpack的解決方案的鏈接，並給出了一個示例，而不必使用單獨的css文件。 – Ogglas

我已經就這個問題今天偶然也發現，現在TS可以直接與webpack和awesome-typescript-loader正是這樣導入CSS：

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

如何在.tsx打字稿中包含.css文件？

回答

相關問題