ts-loader / css-loader 无法 import/resolve 文件
ts-loader / css-loader not being able to import/resolve file
正在尝试使用 style-loader 和 css-loader 添加 css 模块。很难弄清楚这一点。我也不确定是 ts-loader 还是 css-loader.
webpack.config.js
const path = require('path');
module.exports = env => {
return {
devtool: "inline-source-map",
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "/public"),
filename: "build/app.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
},
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
}
}
}
分量
import styles from "./Main.css"; // TS2307: Cannot find module './Main.css'.
P.S。我尝试使用 extract-text-webpack-plugin
,但这只会把一切搞得一团糟,使错误变得势不可挡
因此,由于这似乎不是一个常见的问题,所以我设法找到了解决方案。希望这会帮助任何与 ts-loader
+ css-loader
.
作斗争的人
1) 添加 .d.ts 文件处理 .css 扩展
// I put it in root, but could be anywhere
// <root>/defs.d.ts
declare module "*.css" {
var styles: { [key: string]: string };
export = styles
}
2) 由于我使用的是Webpack 3.x,所以在webpack.config.js
中将style
改为style-loader
module: {
rules: [
//...
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
}
3) 在组件文件
中将样式导入为*
// In Main.tsx
import * as styles from "./Main.css";
// Usage
<div className={styles.nameOfClass} />
4) 在tsconfig.json
中将.d.ts
文件添加到include
部分。就我而言,它...
"include": [
"src",
"./defs.d.ts"
],
重新启动 webpack-dev-server 或其他任何东西,它应该很好(希望如此)。
编码愉快!
正在尝试使用 style-loader 和 css-loader 添加 css 模块。很难弄清楚这一点。我也不确定是 ts-loader 还是 css-loader.
webpack.config.js
const path = require('path');
module.exports = env => {
return {
devtool: "inline-source-map",
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "/public"),
filename: "build/app.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
},
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
}
}
}
分量
import styles from "./Main.css"; // TS2307: Cannot find module './Main.css'.
P.S。我尝试使用 extract-text-webpack-plugin
,但这只会把一切搞得一团糟,使错误变得势不可挡
因此,由于这似乎不是一个常见的问题,所以我设法找到了解决方案。希望这会帮助任何与 ts-loader
+ css-loader
.
1) 添加 .d.ts 文件处理 .css 扩展
// I put it in root, but could be anywhere
// <root>/defs.d.ts
declare module "*.css" {
var styles: { [key: string]: string };
export = styles
}
2) 由于我使用的是Webpack 3.x,所以在webpack.config.js
style
改为style-loader
module: {
rules: [
//...
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
}
3) 在组件文件
中将样式导入为*
// In Main.tsx
import * as styles from "./Main.css";
// Usage
<div className={styles.nameOfClass} />
4) 在tsconfig.json
中将.d.ts
文件添加到include
部分。就我而言,它...
"include": [
"src",
"./defs.d.ts"
],
重新启动 webpack-dev-server 或其他任何东西,它应该很好(希望如此)。
编码愉快!