如何导入前处理CSS作为字符串与Webpack？

Question

我需要导入编译后的CSS代码作为字符串从".styl“(Stylus预处理器)文件。

从逻辑的角度看：

1. 首先我们需要对样式进行预处理.它被劝导说，stylus-loader将用stylus来完成它，我们需要原始的css代码。我认为raw-loader是不够的，因为stylus-loader返回的不是一个字符串。

以下代码：

import styles from "!raw-loader!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";

将返回类似于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');

// ...

只是

import styles from "!stylus-loader?@Assets/Styles/Typography/ArticleFormatting.styl";

将导致错误：

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-加载器与Stylus-加载程序：

import styles from "!raw-loader!stylus-loader!@Assets/Styles/Typography/ArticleFormatting.styl";

像这样导入数组：

[                                                                                                                                                                                                                                                          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: 
}

Answer 1

一般的想法是，您可以通过以下方式访问生成的CSS：

import CSS from "./style.css";
console.log(CSS);

关于“您可能需要额外的加载程序来处理这些加载程序的结果”错误。你用过css-loader吗？您不能只使用stylus-loader。因为它是CSS，所以CSS应该首先由css-loader来处理。试试这个：

    // webpack.config.js

module.exports = {
...
  module: {
    rules: [
      ...
      {
        test: /.styl$/,
        use: [
          'css-loader',
          'stylus-loader'
          
        ]
      }
      ...
   ]
...
};