如何在打字稿文件中要求/导入.less文件

本文介绍了如何在打字稿文件中要求/导入.less文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将.less文件导入到.ts文件中，但是我无法做到这一点. 我正在将webpack2用作捆绑程序& Webstorm IDE

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

在此，可减少webpack.config.js文件中的加载程序的代码段

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

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

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

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

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

[

推荐答案

尽管我找不到如何在ts文件中包含.less的方法，但是我找到了一种方法来创建javascript文件并减少导入

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";

已经创建了一个配置文件来解析要在CommonsChunkPlugin

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' }

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

其中字符串style与条目对象中的键名称相同

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