Webpack-Loader auf ein Codefragment anwenden

Question

Gibt es eine Möglichkeit, webpack dazu zu bringen, seine Loader nur auf einen Teil einer Datei anzuwenden? Hier ist ein Beispiel, was ich meine ...

Nehmen wir an, ich habe eine Reihe von Loadern für .scss Dateien konfiguriert. Wäre genial eine Komponente in einem der beiden folgenden Möglichkeiten, um der Lage sein, schreiben die gleiche Leistung zu erzeugen:

---

1) Standard-Lader

component.js

import './component.scss'; 

export class Component { 
... 

Komponente .scss

.component { 
    background: #663399 
} 

... 

---

2) Individuelle Lader

component.js

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

export class Component { 
... 

---

Wie ich etwas ähnlich dem zweiten Fall erreichen könnte? Könnte ich irgendwie ändern, wie Webpack die requires, imports und Dateierweiterungen identifiziert, so dass es meine benutzerdefinierte Syntax verstehen könnte? Als letzter Ausweg könnte man einen Loader für js-Dateien schreiben, die diesen Job für mich erledigen?

Danke für irgendwelche Hinweise über was soll ich lesen, um dies zu tun.

Answer 1

Sie könnten versuchen, diese 2 Bibliotheken mit Webpack zu verwenden, um zuerst zu einem cssobj und dann zu reinem CSS zu konvertieren.

https://github.com/cssobj/cssobj-converter (unterstützt sass/weniger)

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 

Sie eine weltweit einzigartige Funktion __insertCSS (die index.js in Ihrer App) schreiben können, welche Ebene CSS Strings Einsätze in das head Element.

Nun ist diese Bibliotheken nur laufen auf Knoten, so dass Sie einen Schritt mehr brauchen, um es im Browser funktioniert: eine String Ersatz-Plugin

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

In webpack Config Sie das Plugin ersetzen konfigurieren sollten Um nach einem Muster wie /__insertCSS\(.*?\)/ zu suchen, rufen Sie das String-Argument auf, bearbeiten Sie es wie oben gezeigt und ersetzen Sie es durch das Ergebnis.

In Ihrem webpack config:

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 
} 

...in 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) + '")' 
          } 
         } 
        ]}) 
       } 
      ] 

Wohlgemerkt, habe ich nicht getestet, aber es scheint auf den ersten Blick machbar.

Dieser String Ersatz Lader vor babel kommen muss, ist es nur erste

in der loaders gestellt hatten

Doc hier: https://webpack.github.io/docs/loaders.html#loader-order