我正在尝试让webpack为我所有的* .scss文件生成* .d.ts文件，但是由于某些原因，webpack不会这样做。我为scss创建了一个模块规则测试，然后将作业传递给style-loader，typings-for-css-modules-loader，postcss-loader和sass-loader。我的目标是能够在TypeScript中使用* .scss标记，如以下App.tsx中的示例所示。但是，在运行webpack-dev-server时，不会创建* .d.ts文件，而是显示错误TS2307: Cannot find module './App.scss'。
如何创建* .d.ts文件？
package.json：
{
"name": "myapp-administration",
"version": "1.0.0",
"description": "Administration application for MyApp.",
"main": "index.js",
"author": "My Name",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development",
"build": "electron-packager . myapp-administration --platform linux --arch x64 --out dist/",
"deb64": "electron-installer-debian --src dist/myapp-administration-linux-x64/ --dest dist/installers/ --arch amd64",
"compile": "yarn build && yarn deb64"
},
"dependencies": {
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.6",
"babel-loader": "^8.0.5",
"babili-webpack-plugin": "^0.1.2",
"css-loader": "^2.1.0",
"electron": "^4.0.1",
"electron-installer-debian": "^1.1.0",
"electron-installer-zip": "^0.1.2",
"electron-packager": "^13.0.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
webpack.dev.config.js：
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { spawn } = require('child_process')
// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up.
const defaultInclude = path.resolve(__dirname, 'src')
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
include: defaultInclude
},
{
test: /\.scss$/,
exclude: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[local]" }},
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
},
{
test: /\.scss$/,
include: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
},
{
test: /\.jsx?$/,
use: [{ loader: 'babel-loader' }],
include: defaultInclude
},
{
test: /\.(jpe?g|png|gif)$/,
use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
target: 'electron-renderer',
plugins: [
new HtmlWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
devtool: 'cheap-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
stats: {
colors: true,
chunks: false,
children: false
},
before() {
spawn(
'electron',
['.'],
{ shell: true, env: process.env, stdio: 'inherit' }
)
.on('close', code => process.exit(0))
.on('error', spawnError => console.error(spawnError))
}
}
}
App.tsx：
import * as React from "react";
import Style from "./App.scss";
export class App extends React.Component<{}, {}> {
public render() {
return <div>
This text is from App.tsx
<div className={Style.app}>
This is my colored box!
</div>
</div>;
}
}
App.scss：
.app {
background-color: blue;
color:gray;
}
错误：
ERROR in ./src/Components/App.scss (./node_modules/typings-for-css-modules-loader/lib??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/lib/loader.js!./src/Components/App.scss)
Module build failed (from ./node_modules/typings-for-css-modules-loader/lib/index.js):
Error: Cannot find module 'css-loader/locals'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/home/myuser/Documents/myapp/administration/node_modules/typings-for-css-modules-loader/lib/index.js:9:15)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
@ ./src/Components/App.scss 2:14-212 21:1-42:3 22:19-217
@ ./src/Components/App.tsx
@ ./src/index.tsx
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./src/index.tsx
ERROR in /home/myuser/Documents/myapp/administration/src/Components/App.tsx
./src/Components/App.tsx
[tsl] ERROR in /home/myuser/Documents/myapp/administration/src/Components/App.tsx(2,19)
TS2307: Cannot find module './App.scss'.
ℹ ｢wdm｣: Failed to compile.