javascript - importar - css important
¿Cómo importar un archivo css en un componente react? (7)
-
Instalar Style Loader y CSS Loader: npm install --save-dev style-loader npm install --save-dev css-loader
-
Configurar webpack
módulo: {cargadores: [{prueba: /.css$/, cargador: ''style-loader''}, {prueba: /.css$/, cargador: ''css-loader'', consulta: {módulos: verdadero, localIdentName: ''[nombre] [local] _ [hash: base64: 5]''}}]}
Como dice el título, quiero importar un archivo CSS en un componente de reacción. He intentado lo siguiente:
import disabledLink from "../../../public/styles/disabledLink";
Pero el error me muestra esto:
Módulo no encontrado: Error: No se puede resolver ''archivo'' o ''directorio'' ../../../public/styles/disabledLink en c: / Users / User / Documents / pizza-app / client / src / components @. /client/src/components/ShoppingCartLink.js 19: 20-66
Hash: 2d281bb98fe0a961f7c4
Versión: webpack 1.13.2
El archivo se encuentra en esta ruta:
C: / Users / User / Documents / pizza-app / client / public / styles / disabledLink.css
Para mí, parece que importar no está buscando la ruta correcta.
Pensé que con
../../../
comenzaría a buscar la ruta tres capas de carpetas arriba.
El archivo que debe importar el archivo CSS se encuentra aquí:
C: / Users / User / Documents / pizza-app / client / src / components / ShoppingCartLink.js
Gracias por cualquier aportación!
Debe usar css-loader al crear un paquete con wepback.
Instalarlo:
npm install css-loader --save-dev
Y agréguelo a los cargadores en las configuraciones de su paquete web:
module.exports = {
module: {
loaders: [
{ test: //.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
Después de esto, podrá incluir archivos css en js.
En los casos en que solo desee inyectar algunos estilos de una hoja de estilos en un componente sin agruparlos en toda la hoja de estilos, le recomiendo https://github.com/glortho/styled-import . Por ejemplo:
const btnStyle = styledImport.react(''../App.css'', ''.button'')
// btnStyle is now { color: ''blue'' } or whatever other rules you have in `.button`.
NOTA: Soy el autor de esta lib, y la construí para casos en los que las importaciones masivas de estilos y módulos CSS no son la mejor solución o la más viable.
Lo siguiente importa un archivo CSS externo en un componente React y genera las reglas CSS en el
<head />
del sitio web.
- Instale Style Loader y CSS Loader :
npm install --save-dev style-loader
npm install --save-dev css-loader
- En webpack.config.js:
module.exports = {
module: {
rules: [
{
test: //.css$/,
use: [ ''style-loader'', ''css-loader'' ]
}
]
}
}
- En un archivo componente:
import ''./path/to/file.css'';
Ni siquiera tiene que nombrarlo si no necesita:
p.ej
import React from ''react'';
import ''./App.css'';
vea un ejemplo completo aquí https://egghead.io/lessons/build-a-jsx-live-compiler
Sugeriría usar módulos CSS:
Reaccionar
import React from ''react'';
import styles from ''./table.css'';
export default class Table extends React.Component {
render () {
return <div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>;
}
}
Representación del componente:
<div class="table__table___32osj">
<div class="table__row___2w27N">
<div class="table__cell___2w27N">A0</div>
<div class="table__cell___1oVw5">B0</div>
</div>
</div>
También puede usar el módulo requerido.
require(''./componentName.css'');
const React = require(''react'');