我正在尝试在.less
文件中导入.ts
文件,但我无法执行此操作。
我使用webpack2作为捆绑器& 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
文件
[
答案 0 :(得分:0)
虽然我无法找到如何在.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
与条目对象
答案 1 :(得分:-1)
如果你的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>