Necesito importar el código CSS compilado como una cadena de archivos ".styl" (preprocesador Stylus).
Desde el punto de vista de la lógica:
stylus-loader lo haga con el pre-precesor de stylus .raw-loader no será suficiente porque lo que devuelve stylus-loader no es una cadena.Debajo del código:
import styles from "!raw-loader!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";devolverá el código en cadena que se parece a JavaScript:
var loaderUtils = require('loader-utils'); var stylus = require('stylus'); var path = require('path'); var fs = require('fs'); var when = require('when'); var whenNodefn = require('when/node/function'); var cloneDeep = require('lodash.clonedeep'); // ...Sólo
import styles from "!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";provocará el error:
Module parse failed: Unexpected token (1:0) friendly-errors 13:26:25 File was processed with these loaders: * ./node_modules/stylus-loader/index.js You may need an additional loader to handle the result of these loaders. > .ArticleFormatting h2 { | padding: 5px; | font-weight: bold;Cargador CSS con cargador Stylus:
import styles from "!raw-loader!stylus-loader!@Assets/Styles/Typography/ArticleFormatting.styl";importa la matriz de esta manera:
[ 15:13:30 [ './node_modules/css-loader/dist/cjs.js!./node_modules/stylus-loader/index.js!./Assets/Styles/Typography/ArticleFormatting.styl', '', '', { version: 3, sources: [], names: [], mappings: '', sourceRoot: '' } ], toString: [Function: toString], i: }La idea general es que puede acceder al CSS generado simplemente haciendo lo siguiente:
import CSS from "./style.css"; console.log(CSS); Con respecto al error "Es posible que necesite un cargador adicional para manejar el resultado de estos cargadores". ¿Has usado un css-loader ? No puede usar solo stylus-loader . Porque es CSS, y CSS debe ser manejado primero por css-loader . Prueba esto:
// webpack.config.js module.exports = { ... module: { rules: [ ... { test: /.styl$/, use: [ 'css-loader', 'stylus-loader' ] } ... ] ... };