如何在typescript文件中要求/ import .less文件

Question

我正在尝试在.less文件中导入.ts文件，但我无法执行此操作。 我使用webpack2作为捆绑器＆amp; webstorm IDE

此处为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"],
}

如link中所述，我尝试创建一个global.d.ts文件，但没有运气

此外，我尝试require main.ts中的文件，但在这种情况下，我没有看到任何需要较少文件的选项。 我的问题是如何在打字稿文件中加载.less文件

[

Answer 1

虽然我无法找到如何在.less文件中加入ts但我通过创建javascript文件并在其中导入较少的内容找到了解决方法

<强> import.js

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

已创建配置文件以解析CommonsChunkPlugin

中要使用的路径

<强> entryConfig.js

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

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

其中字符串style与条目对象

中的键名相同

Answer 2

如果你的style.less文件在项目的根目录，src文件夹，你可以按如下方式使用它。

import "style.less";

webpack.config.js应该正确配置样式加载器和less-loader，如here中所述 我喜欢这样：

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

我有两个，一个用于ts / js文件中的导入，另一个用于html模板中的require

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