如何在TypeScript文件中引用/导入.less文件

Question

我正在尝试在.ts文件中导入一个.less文件，但我无法做到这一点。我正在使用webpack2作为打包工具和webstorm IDE。

以下是webpack.config.js文件中的less加载器片段：

{
  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文件来解决问题，但没有成功。 我还尝试在main.ts中使用require加载文件，但这种情况下我没有看到任何选项需要一个less文件。 我的问题是如何在typescript文件中加载.less文件。

[]

- brk

---

如果您只想在应用程序中包含 less 文件，可以执行 import <path>/style.less。Webpack 将在您的捆绑包中包含（并解析）该文件。仅因为您的 IDE 无法自动完成路径，这并不意味着它无法工作。 - Sebastian Sebald

@SebastianSebald 我试过了。问题是ts文件无法识别.less文件，如果我以那种方式导入，构建/编译会失败。 - brk

Answer 1

虽然我找不到在ts文件中如何引入.less，但我通过创建一个JavaScript文件并在其中导入less的方式绕过了这个问题。

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 与 entry 对象中的键名相同

- brk

Answer 2

如果您的style.less文件位于项目根目录下的src文件夹中，您可以按照以下方式使用它。

import "style.less";

webpack.config.js应该像这里所提到的一样，正确配置style-loader和less-loader。

我的配置代码如下：

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>

- Jhovanni