webpackを使用してlessファイルからCSSファイルを取得するには

Question

私は、角度とウェブパックを使用してSPAを構築しています。ここではあまり使用しないので、後でウェブサイトのテーマ作成に役立ちます。しかし、ここでの問題は、角度uiのルータはCSSファイルを取るだけです、私はwebpackによって飛んで生成されたCSSファイルを見つけることはできないようです。私がテーマ設定オプションを念頭に置いている間に、どのようにCSSを使うことができるかについての提案は後で必要になります。

私の仕事は順調に進んでいます。 ありがとう！

Answer 1

デフォルトでは、webpackには、index.htmlファイルの<style>タグにすべてのCSSファイル（libsから生成されたもの）が含まれます。

あなたのLESSファイルからCSSを生成し、別のファイルとしてCSSファイルを抽出するために、いくつかのプラグインが必要になります。ここでは

• less-loader
• extract-text-webpack-plugin

は私のWebPACKのコンフィギュレーションファイルの抽出物でありますLESS/CSSの部分です私はlibs.cssで連結されたlibrairiesと、style.cssファイルでコンパイルされたメインLESSファイル（20以上の他のLESSファイルを含む）のCSSファイルを扱っています。

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('libs.css'); 
var extractLESS = new ExtractTextPlugin('style.css'); 

module.exports = { 
    ... 
    module: { 
     ... 
     loaders: [{ 
      // load css without sourcemap 
      test: /\.css$/, 
      loader: extractCSS.extract(
       'css' 
      ) 
     }, { 
      // compile less with source maps 
      test: /\.less$/, 
      loader: extractLESS.extract(
       'css?sourceMap!less?sourceMap' 
      ) 
     }] 
    }, 
    plugins: [ 
     // extract inline css into separate files with sourcemaps 
     extractCSS, 
     extractLESS 
    ], 
    resolve: { 
     alias: { 
      ... 
      'less': path.join(__dirname, 'src/less'), 
      'css': path.join(__dirname, 'src/css'), 
     } 
    } 
}; 

[.lessファイルにインポート.cssファイル]の