How to require/import .less file in typescript file

Question

I am trying to import a .less file in .ts file but I am not able to do that. I am using webpack2 as bundler & webstorm IDE

Here snippet for less loader in a webpack.config.js file

{
  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"],
}

As mentioned in link I tried by creating a global.d.ts file but no luck

Also i tried to require the file in the main.ts but in this case I am not seeing any option to requires a less file. My question is how to load a .less file in a typescript files

[

Answer 1

Though I could not find out how to include .less in ts files but I found an way around by creating a javascript file and importing less in it

import.js

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

Have created a config file to resolve the paths to be used in CommonsChunkPlugin

entryConfig.js

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

In webpack.config.js

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

//rest of code

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

where string style is same as the key name in entry object