I need to import the compiled CSS code as string from ".styl" (Stylus pre-processor) files.
From the viewpoint of logic:
stylus-loader will do it with stylus pre-precessor.raw-loader will not be enough because what stylus-loader return is not a string.Below code:
import styles from "!raw-loader!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";
will return the stringified code looks like 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');
// ...
Just
import styles from "!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";
will cause the 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;
CSS-loader with Stylus-loader:
import styles from "!raw-loader!stylus-loader!@Assets/Styles/Typography/ArticleFormatting.styl";
imports the array like this:
[ 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:
}
General idea is that you can access the generated CSS simply by:
import CSS from "./style.css";
console.log(CSS);
Regarding "You may need an additional loader to handle the result of these loaders" error. Have you used a css-loader? You can't just use stylus-loader alone. Because it is CSS, and CSS should be handled by css-loader first. Try this:
// webpack.config.js
module.exports = {
...
module: {
rules: [
...
{
test: /.styl$/,
use: [
'css-loader',
'stylus-loader'
]
}
...
]
...
};