typescriptファイルで.lessファイルを要求/インポートする方法

Question

.lessファイルを.tsファイルにインポートしようとしていますが、それを行うことができません。 linkで述べたように、私はここでバンドラ& webstormのIDEとして

をwebpack2使用しています がwebpack.config.jsファイルに以下のローダ用

{ 
    test: /\.less$/,  //less loader 
    loader: ExtractTextPlugin.extract({ 
    fallbackLoader: 'style-loader', 
    //loader: 'css-loader!less-loader' 
    loader: 'raw-loader!less-loader' 
    }) 
}, { 
    test: /\.ts$/, //typescript loader 
    //include: path.resolve(__dirname, "ts-src"), 
    include: path.resolve(__dirname, "js"), 
    loader: "ts-loader" 
} 
//rest of code 
resolve: { 
    extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".css", ".less"], 
} 

スニペット私はglobal.d.tsファイルを作成することで試みたが、 no luck

また、私はrequireのファイルをmain.tsにしようとしましたが、この場合、少ないファイルを必要とするオプションはありません。 私の質問は、私は.lessts内のファイルを含める方法を見つけることができませんでしたけれどもtypescriptですファイル

[

Answer 1

で.lessファイルをロードする方法ですが、私には、JavaScriptファイルを作成してインポートすることで回避する方法を見つけましたそれにはあまり

import.js

import "./../styles/main.less"; 

H aveがCommonsChunkPlugin

entryConfig.js webpack.config.jsストリングstyleと同じである

entry: { 
    //rest of code 
    style: entryConfig.style 
}, 

//rest of code 

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    filename: 'common-[hash].js', 
    chunk: ['common', 'home','style'] 
}) 

で

module.exports={ 
    // rest of code 
    style:'./js/import.js' 
} 

に使用されるパスを解決するために、設定ファイルを作成しましたエントリオブジェクト内のキー名

Answer 2

style.lessファイルがプロジェクトのルートにある場合、srcフォルダ次のように使用してください。 here で述べたように

import "style.less"; 

webpack.config.jsが適切なスタイル・ローダーとあまりローダーを設定している必要があります私はこのようにそれを持っている：

module: { 
    rules: [ 
     ... 
     { test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'], issuer: /\.[tj]s$/i}, 
     { test: /\.less$/i, use: ['css-loader', 'less-loader'], issuer: /\.html?$/i }, 
    ] 
} 

私は2つ、TSでの輸入のための1つを持っていますもう一つはです/ JSファイルには、あなたは自分のアプリで `less`ファイルを含めたい場合は、`インポート /style.less`を行うことができますHTMLテンプレートに

<require from="style.less"></require>