Question

有没有办法让webpack将它的加载器应用到文件的一部分？这是我的意思......

我们说我为.scss文件配置了一堆加载器。能够以下列两种方式中的任何一种来编写组件以产生相同的输出真是太棒了：

1）标准装载机

component.js

import './component.scss';

export class Component {
...

component.scss

.component {
  background: #663399
}

...

2）自定义加载器

component.js

my-magic-import `
  .component {
    background: #663399
  }
`

export class Component {
...

我怎样才能实现与第二种情况相似的东西？我可以以某种方式修改webpack识别requires，imports和文件扩展名的方式，以便能够理解我的自定义语法吗？作为最后的手段，可以为js文件编写一个加载器来为我做这个工作吗？

感谢您提供有关我应该阅读哪些内容的任何提示。

Answer 1

您可以尝试将这两个库与webpack一起转换为cssobj，然后转换为纯CSS。

https://github.com/cssobj/cssobj-converter（支持sass / less）

var converter = require('cssobj-converter')
var obj = converter('p { color: red; }') //obj is a css object

https://github.com/cssobj/cssobj

var cssobj = require('cssobj')
var result = cssobj(obj) // the result is a CSS string

您可以编写一个全局唯一的函数__insertCSS（在您的应用程序的index.js中），它在head元素中插入 plain CSS字符串。

现在这些库只能在节点上运行，因此您还需要一个步骤才能使其在浏览器中运行：字符串替换插件

https://www.npmjs.com/package/string-replace-webpack-plugin

在webpack配置中，您应该配置替换插件以搜索类似/__insertCSS\(.*?\)/的模式，获取字符串参数，如上所示处理它并将其替换为结果。

在你的webpack配置中：

var StringReplacePlugin = require("string-replace-webpack-plugin");
var converter = require('cssobj-converter')
var cssobj = require('cssobj')

function parseSass(str){
var obj = converter(str) //obj is a css object
return cssobj(obj) // the result is a CSS string
}

...在module中：

    loaders: [
             // configure replacements for file patterns 
             { 
                test: /\.js(x?)$/,
                loader: StringReplacePlugin.replace({
                    replacements: [
                        {
                            pattern: /__insertCSS\(`(.*?)`\)/ig,
                            replacement: function (match, p1, offset, string) {
                               //p1 is the string enclosed by backticks
                                var cssStr =  parseSass(p1); 
                              //need to escape quotes with JSON in resulting string   
                                return '__insertCSS("' + JSON.stringify(cssStr) + '")'
                            }
                        }
                    ]})
                }
          ]

请注意，我没有测试过，但初看起来似乎是可行的。

这个字符串替换加载器必须在babel之前，只需将它放在loaders数组

中

Doc在这里：https://webpack.github.io/docs/loaders.html#loader-order

将webpack加载器应用于代码片段

1 个答案: