无法导入 CSS/SCSS 模块

我试图从一个 CSS 模块导入一个主题，但 TypeScript 给了我一个“无法找到模块”错误，并且该主题在运行时没有应用。我认为我的 Webpack 配置有些问题，但我不知道问题出在哪里。

我使用以下工具:

"typescript": "^2.0.3"
"webpack": "2.1.0-beta.25"
"webpack-dev-server": "^2.1.0-beta.9"
"react": "^15.4.0-rc.4"
"react-toolbox": "^1.2.3"
"node-sass": "^3.10.1"
"style-loader": "^0.13.1"
"css-loader": "^0.25.0"
"sass-loader": "^4.0.2"
"sass-lint": "^1.9.1"
"sasslint-webpack-plugin": "^1.0.4"

这是我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');
var sassLintPlugin = require('sasslint-webpack-plugin');


module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index.tsx',
],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:8080/',
filename: 'dist/bundle.js',
},
devtool: 'source-map',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
},
module: {
rules: [{
test: /\.js$/,
loader: 'source-map-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loader: 'tslint-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loaders: [
'react-hot-loader/webpack',
'awesome-typescript-loader',
],
exclude: /node_modules/,
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.css$/,
loaders: ['style', 'css']
}],
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [
new sassLintPlugin({
glob: 'src/**/*.s?(a|c)ss',
ignoreFiles: ['src/normalize.scss'],
failOnWarning: false, // Do it.
}),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './'
},
};

以及我要导入的 App.tsx:

import * as React from 'react';


import { AppBar } from 'react-toolbox';
import appBarTheme from 'react-toolbox/components/app_bar/theme.scss'
// local ./theme.scss stylesheets aren't found either


interface IAppStateProps {
// No props yet
}


interface IAppDispatchProps {
// No state yet
}


class App extends React.Component<IAppStateProps & IAppDispatchProps, any> {


constructor(props: IAppStateProps & IAppDispatchProps) {
super(props);
}


public render() {
return (


<div className='wrapper'>
<AppBar title='My App Bar' theme={appBarTheme}>
</AppBar>
</div>


);
}
}


export default App;

启用类型安全样式表模块导入还需要什么？

233404 次浏览
小开

TypeScript 不知道除 .ts或 .tsx之外还有其他文件，因此如果导入具有未知的文件后缀，它将抛出错误。

如果您有一个允许您导入其他类型文件的 webpack 配置，那么您必须告诉 TypeScript 编译器这些文件存在。为此，需要添加一个声明文件，其中使用适当的名称声明模块。

要声明的模块的内容取决于用于文件类型的 webpack 加载程序。在通过 装弹手→ Css-loader→ 风格加载器传输 *.scss文件的 webpack 配置中，导入的模块中不会有任何内容，正确的模块声明应该是这样的:

// declaration.d.ts
declare module '*.scss';

如果加载程序配置为 css 模块，只需像下面这样扩展声明:

// declaration.d.ts
declare module '*.scss' {
const content: Record<string, string>;
export default content;
}
小开

这里有一个完整的配置，对我来说是可行的(我刚刚花了一个小时痛苦的尝试和错误-以防有人遇到同样的问题) :

TypeScript + WebPack + Sass

webpack.config.js

module.exports = {
//mode: "production",
mode: "development", devtool: "inline-source-map",


entry: [ "./src/app.tsx"/*main*/ ],
output: {
filename: "./bundle.js"  // in /dist
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
},
module: {
rules: [


{ test: /\.tsx?$/, loader: "ts-loader" },


{ test: /\.scss$/, use: [
{ loader: "style-loader" },  // to inject the result into the DOM as a style block
{ loader: "css-modules-typescript-loader"},  // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
{ loader: "css-loader", options: { modules: true } },  // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" },  // to convert SASS to CSS
// NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
] },


]
}
};

在你的项目中也放一个 declarations.d.ts:

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts').
declare module '*.scss';

在 package.json的开发依赖中，您将需要所有这些:

  "devDependencies": {
"@types/node-sass": "^4.11.0",
"node-sass": "^4.12.0",
"css-loader": "^1.0.0",
"css-modules-typescript-loader": "^2.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}

然后，在 mystyle.scss旁边应该有一个 mystyle.d.ts，其中包含您定义的 CSS 类，您可以将其作为类型脚本模块导入，并使用如下所示:

import * as styles from './mystyles.scss';


const foo = <div className={styles.myClass}>FOO</div>;

CSS 将被自动加载(作为一个 style元素注入到 DOM 中) ，并包含含义模糊的标识符，而不是您在。在页面中隔离样式(除非使用 :global(.a-global-class) { ... })。

请注意，无论何时添加 CSS 类、删除它们或重命名它们，第一次编译将失败都是如此，因为导入的 mystyles.d.ts 是旧版本，而不是在编译过程中生成的新版本。重新编译。

好好享受吧。

小开

如果使用 tsconfig.json 路径设置，请注意

请注意，如果您使用这些解决方案与 tsconfig 路径一起来缩短您的导入，您将需要额外的配置。

如果您碰巧使用这样的路径 tsconfig:

{
"compilerOptions": {
"paths": {
"style/*": [ "src/style/*" ],
}
}
}

所以你可以这样做:

import { header } from 'style/ui.scss';

然后，您还需要在您的 webpack 上添加一个 模块解析配置，如下所示:

module.exports = {
...
resolve: {
...
alias: {
style: path.resolve(__dirname, 'src', 'style')
}
}
}

确保路径是根据您的设置设置的。

这使得 webpack 知道在哪里查找，因为它认为新的导入路径实际上是一个模块，所以默认为 node _ module 目录。有了这个配置，它就知道在哪里查找它，构建就可以工作了。

小开

我用的是 Typeescript-plugin-css-module

npm install -D typescript-plugin-css-modules

Tsconfig.json

{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
小开

只需添加包含以下内容的 输入性障碍文件:

declare module "*.module.css";

并且记住用‘ module’声明你的 css 文件 Styles.module.css

进口:

import React from 'react';
import styles from './styles.module.css';
小开

我在角度方面也有同样的问题，我尝试运行 npm audit fix，它解决了我的问题。

小开

百分百成功

只需在项目中添加一个“ Declaration ations.d.ts”，并在其中添加以下代码行:

declare module '*.css';
小开

在我的例子中，我升级了 NodeJS 的(主要)版本，这可能会导致问题。在前端，我还看到了一个错误 大意如下:

Node Sass couldn't find a binding for your current environment

我的解决办法是:

  1. npm cache clean --force

  2. 删除项目的 node_modules文件夹

  3. 删除 package-lock.json文件

  4. npm install

在此之后，运行 npm run dev会产生以下消息:

Failed to load C:\path\tsconfig.json: Missing baseUrl in compilerOptions

所以最后要解决的问题是:

  1. 编辑 tsconfig.json文件并在 "compilerOptions":下添加 "baseURL": ".",，如下所示:
"compilerOptions": {
"baseUrl": ".",
etc etc etc

问题已经解决了。

参考文献:

NodeSass 无法找到当前环境的绑定

小开

只需添加包含以下内容的 declaration.d.ts文件:

declare module "*.module.css";

记住用 .module.css声明你的 css 文件。

输入:

import styles from './styles.module.css'

如果使用 Sass，请将 .css语句替换为 .scss。

小开

在我的例子中，我只是注释加载程序 scss 和 sass 就解决了这个问题:

{
test: /\.css$/,
use:
[
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true
}
}
// ,
// {
//     loader: 'sass-loader'
// }
// ,
// {
//     loader: 'scss-loader'
// }
]
}

声明模块“ * . module.css”; 不影响结果。

记住: 一定要跑

npm start

来测试这些配置更改，看看是否发生了什么变化。 这么做能让我今天下午好过点。

小开

根据@Kalle 提供的答案，我还需要在 include tsconfig 选项中使声明类型可以被发现:

"include": ["./src/**/*.tsx", "./src/**/*.ts", "./typings/*.ts"]

与包含 declaration.d.ts文件的 typings在@Kalle 的答案中看到。

小开

上面的答案对我来说不起作用，我正在研究 scss + TS + React (如果你也是，这个答案是给你的)。我所做的是:

在 src 文件夹中创建一个 Declaration ations.d.ts 文件，并在其中添加以下代码

declare module "*.scss" {
const content: { [className: string]: string };
export = content;
}

然后在 src 文件夹中创建 tsconfig.json 文件并添加以下代码

{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
//add the following
"include": ["src/**/*.ts", "declarations.d.ts"]
}

然后最终安装插件作为 Npm i type escript-plugin-css-module

起作用了:)

小开

这对我很有用(我使用的是 Typecript + vite)。

  1. 将此文件添加到项目根文件夹中的 declaration.d.ts文件

    declare module "*.module.css";


declare module "*.module.scss";

  2. 在 tsconfig.json中向 「包括」添加 “声明”。

{
"compilerOptions": {...},
"include": ["src", "declaration.d.ts"],
}

这将允许声明在 src文件夹中工作，而不仅仅是 declarations.d.ts所在的 root文件夹。

您可以将 declaration.d.ts直接添加到您直接导入样式的文件夹中，但这不是一个好主意。

小开

在我用 CRA 创建的 React 应用程序中，我必须添加 反应-应用-环境:

declare module '*.css';

像上面建议的那样，在声明 s.d.ts 中添加此声明不起作用。

小开

在我的项目中，在/src 文件夹中，有一个 response-app-env. d.ts 文件，其中包含内容

/// <reference types="react-scripts" />

我不明白他为什么会这样？我查看了导入它的搜索，但是搜索结果为0。不知怎么的，我删除了它，之后我得到了很多错误:

无法找到模块’./Home.scss’或其对应的类型 TS2307与警告一起编译。

找不到 module’./BlockPosts.module.css’或其对应类型 TS2307与警告一起编译。

然后我恢复了这个文件，所有的错误都消失了

在/src 文件夹 反应-应用-环境中的项目中创建一个文件

/// <reference types="react-scripts" />

也许你也不会再犯错了

小开

正如@Kalle 提到的

TypeScript 不知道除了.ts 或. tsx 之外还有其他文件 如果导入有一个未知的文件后缀，它将抛出一个错误。

为了避免 TS 显示此错误，我的方法是创建一个 类别文件夹并在其中添加一个 .d.ts扩展文件包含声明。

像这样:

enter image description here

关于 .d.ts文件

TypeScript 主要有两种类型的文件。 .ts文件是实现文件 包含类型和可执行代码的文件 产生 .js输出，并且是您通常编写代码的位置。

.d.ts文件是仅包含类型信息的声明文件。 这些文件不产生 .js输出; 它们仅用于 打字检查。

您可以阅读关于 TS 声明 给你的更多信息

小开

只需在 src 目录中添加文件 react-app-env.d.ts，然后在这里写入 /// <reference types="react-scripts" /> 这将通过导入在 node_modules/react-scripts/lib/react-app.d.ts中声明的各种名称来解决这个问题

小开

我找到了答案(至少对我而言)。

许多人的回答都是:

// declaration.d.ts
declare module '*.scss';

哦，是的，我在我现有的.d.ts 文件中这样做了:

// this.name.is.at.your.disposal.d.ts
export type {};


declare module "*.css";


declare global {
declare const NEXT_PUBLIC_SOME_URL: string;
}

但是编译器仍然抱怨“哦，我不明白这些胡言乱语”

我注意到这条线

export type {};

是你需要用你的上帝的名义去除的邪恶。

我得去买瓶啤酒了。


提交答案