コードフラグメントにWebpackローダーを適用する

Question

webpackを使ってローダーをファイルの一部に適用する方法はありますか？ここに私が意味するものの例があります...

私は.scssファイルのために設定されたローダーの束を持っているとしましょう。

---

1）標準ローダー

component.js

import './component.scss'; 

export class Component { 
... 

成分：同じ出力を生成するために2つの次のいずれかの方法でコンポーネントを書くことができるように素晴らしいであろう.scss

.component { 
    background: #663399 
} 

... 

---

2）カスタムローダー

component.js

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

export class Component { 
... 

---

どのように私は2番目の場合と同じような何かを達成できますか？ requires、importsとファイル拡張子を識別する方法をwebpackが変更して、私のカスタム構文を理解できるようにしましたか？ 最後の手段として、この仕事をするjsファイル用のローダーを書くことができますか？

これを行うために私が何を読むべきかについてのヒントはありがとう。

Answer 1

webpackでこれらの2つのライブラリを使用して、最初にcssobjに変換してから、その後に普通のCSSに変換してみることができます。

https://github.com/cssobj/cssobj-converter（以下SASSを/サポート）

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 

あなたがで平野 CSSの文字列を挿入する（あなたのアプリのindex.jsで）グローバルに固有の機能__insertCSSを書くことができますhead要素。

さて、これらのライブラリだけあなたはそれをブラウザで動作させるために一歩を必要とするので、ノード上で実行します。WebPACKのコンフィグで文字列置換プラグインを

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

あなたは置き換えるプラグインを設定する必要があります/__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) + '")' 
          } 
         } 
        ]}) 
       } 
      ] 

マインドあなたは、私がいることをテストしていませんが、それは第一印象で実現可能なようです。

この文字列置換ローダはちょうど

ドクここloaders配列の最初のそれを置く、バベルの前に来なければなりません：https://webpack.github.io/docs/loaders.html#loader-order