webpack을 사용하여 less 파일에서 CSS 파일을 얻으려면

Question

나는 각형과 웹팩이있는 SPA를 제작하고 있습니다. 여기서는 나중에 사용량도 적기 때문에 나중에이 웹 사이트의 테마를 도울 수 있습니다. 하지만 문제는 여기에 각도 ui 라우터에만 CSS 파일을 걸립니다, 나는 webpack에 의해 비행에 생성되는 CSS 파일을 찾을 것하지 않습니다. 테마 옵션을 염두에 두면서 CSS를 사용할 수있는 방법에 대한 제안은 나중에 필요합니다.

도움이 되셨다면 제 작업이 도움이 될 것입니다. 감사합니다.

Answer 1

기본적으로 webpack은 index.html 파일의 <style> 태그에 모든 CSS 파일 (포함 된 libs 파일)을 포함시킵니다.

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

내 웹팩 구성 파일의 추출물 :

당신은 당신의 LESS 파일에서 CSS를 생성하고 별도의 파일로 CSS 파일의 압축을 일부 플러그인이 필요합니다 덜/CSS 부분. 나는 파일로 컴파일 된 libs.css과 주 부족 파일 (20+ 다른 덜 파일 포함)에서 연결되는 librairies의 일부 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 파일]의