javascript - setup - webpack react js

Utilice los módulos CSS en los componentes React con Typescript construido por webpack

Question

Quiero usar el cargador css con la opción ''módulos'' de webpack en una aplicación React escrita en Typescript. Este ejemplo fue mi punto de partida (están usando Babel, webpack y React).

configuración webpack

var webpack=require(''webpack'');
var path=require(''path'');
var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={
    entry: [''./src/main.tsx''],
    output: {
        path: path.resolve(__dirname, "target"),
        publicPath: "/assets/",
        filename: ''bundle.js''
    },
    debug: true,
    devtool: ''eval-source-map'',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['''', ''.jsx'', ''.ts'', ''.js'', ''.tsx'', ''.css'', ''.less'']
    },
    module: {
        loaders: [
            {
                test: //.ts$/,
                loader: ''ts-loader''
            },
            {
                test: //.tsx$/,
                loader: ''react-hot!ts-loader''
            }, {
                test: //.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: "react-hot!babel-loader"
            },
            {
                test: //.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader"
            }, {
                test: //.css/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract(''style-loader'', ''css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css", {allChunks: true})
    ],
    postcss: function() {
        return [require("postcss-cssnext")()]
    }
}

Este es un componente React que quiero diseñar con un archivo CSS que lo acompaña:

import React = require(''react'');
import styles = require(''../../../css/tree.css'')

class Tree extends React.Component<{}, TreeState> {
...

    render() {
        var components = this.state.components
        return (
            <div>
                <h3 className={styles.h3} >Components</h3>
                <div id="tree" className="list-group">
                    ...
                </div>
            </div>
        )
    }
}

    export = Tree

tree.css

.h3{
    color: red;
}

No importa lo que esté haciendo (intenté cambiar la sintaxis de importación, intenté declarar el ''requisito'' para ts-loader, descrito here , siempre obtengo:

Error no detectado: no se puede encontrar el módulo "../../../css/tree.css"

en tiempo de ejecución y

error TS2307: No se puede encontrar el módulo ''../../../css/tree.css''.

por el compilador de TS. ¿Qué esta pasando? Me parece que el css-loader ni siquiera está emitiendo ICSS? ¿O es que ts-loader se comporta mal?

Answer 1

1. Declare ''require'' según la here .
2. Utilice ''require'' como genérico con <any> type: require <any> ("../../../ css / tree.css") .

archivo * .d.ts

declare var require: {
   <T>(path: string): T;
   (paths: string[], callback: (...modules: any[]) => void): void;
   ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
}; 

archivo * .tsx con componente

const styles = require<any>("../../../css/tree.css");
...
<h3 className={styles.h3}>Components</h3>

Sé que ya estaba respondida, pero estuve luchando con eso por un tiempo antes de darme cuenta de que necesitaba usar una especificación de tipo genérico, sin eso no pude acceder al contenido del archivo CSS. (Recibí un error: la propiedad ''h3'' no existe en el tipo ''{}''. )

Answer 2

Puede usar https://github.com/Quramy/typed-css-modules , que crea archivos .d.ts a partir de archivos CSS Módulos .css. Consulte también https://github.com/css-modules/css-modules/issues/61#issuecomment-220684795

Answer 3

Tuve un problema similar. Para mi, funciona la importación:

import ''../../../css/tree.css'';

Webpack cambiar esto como cualquier otra importación normal. Lo cambia a

__webpack_require__(id)

Un inconveniente es que perdió el control sobre la variable de estilo.

Answer 4

Un poco tarde para el juego, pero puedes crear un archivo llamado tree.css.d.ts en la misma carpeta que tree.css que tiene esta línea:

export const h3: string;

y aún usa la instrucción de import * as styles from ... y aún así obtendrás la finalización del código y la compilación de tiempo.

Puede administrar estos archivos de definición manualmente o puede integrar typed-css-modules en su canalización de compilación ( https://github.com/Quramy/typed-css-modules )

Answer 5

import tiene un significado especial para TypeScript. Significa que TypeScript intentará cargar y comprender lo que se está importando. La forma correcta es definir require como usted mencionó pero luego var lugar de import :

var styles = require(''../../../css/tree.css'')`