Cómo requerir/importar un archivo .less en un archivo TypeScript

Estoy intentando importar un archivo .less en un archivo .ts, pero no puedo hacerlo. Estoy usando webpack2 como empaquetador e IDE WebStorm

Aquí fragmento para el cargador less en un archivo 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"],
}

Como se mencionó en link, intenté creando un archivo global.d.ts, pero no tuvo suerte

También intenté require el archivo en el main.ts, pero en este caso no veo ninguna opción para requerir un archivo less. Mi pregunta es cómo cargar un archivo .less en un archivo de TypeScript

[

Respuesta #1

Aunque no pude averiguar cómo incluir .less en archivos ts, encontré una solución creando un archivo de JavaScript y importando less en él

importar.js

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

He creado un archivo de configuración para resolver las rutas que se usarán en CommonsChunkPlugin

entryConfig.js

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

En 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']
})

donde la cadena style es igual al nombre clave en el objeto de entrada

Respuesta #2

Si tu archivo style.less está en la raíz del proyecto, carpeta src, puedes usarlo de la siguiente manera.

import "style.less";

webpack.config.js debería tener style-loader y less-loader configurados correctamente como se menciona aquí, yo lo tengo así:

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

Tengo dos, uno para imports en archivos ts/js, el otro es para require en plantillas html

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