无法导入CSS/SCSS模块。TypeScript显示“找不到模块”。

Question

无法导入CSS/SCSS模块。TypeScript显示“找不到模块”。

239

我正在尝试从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;

需要什么条件才能实现类型安全的样式表模块导入？

- zakdances

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slackermorris · Answer 1

根据@Kalle的答案，我也发现需要在include tsconfig选项中使声明类型可被发现：

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

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

- Michael · Answer 2

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

- Changdae Park · Answer 3

我找到了答案（至少对我来说）。

许多答案都说：

// 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;
}

但 TypeScript 编译器仍然抱怨说 "哦，我不理解这个 blablabla"

我注意到了这一行

export type {};

无论你的神是什么，你需要消灭的就是恶。

我现在得去买啤酒了。

- Awshaf Ishtiaque · Answer 4

我正在使用 NextJS，CSS 模块和 TS，以下解决方案适合我：

在项目的根目录下创建一个 `declaration.d.ts` 文件（就在你的 `tsconfig.json` 文件旁边）。并添加以下内容：

```typescript declare module '*.css' { const content: Record; export default content; } ```

编辑你的 `tsconfig.json` 文件，包含以下内容：

```json "include": ["typings", "src"], ```

- Vitexikora · Answer 5

我遇到了同样的问题，不过

typings.d.ts 配置正确
tsconfig.json 配置正确
webpack 配置正确
在另一个项目中相同的设置是有效的

然而，我仍然遇到了这个错误。

有所帮助的是，从 typings.d.ts 中移除一个导入项

- import { Theme } from '@mui/material/styles'

它没有任何错误或警告。但是阻止了我的声明模块正常工作。希望可以帮到你！

- BuGaGa · Answer 6

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

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

我不知道他为什么会消失？我在搜索中查找它的导入位置，但是搜索结果显示为0。然后我不知怎么把它删掉了，之后我遇到了很多错误：

无法找到模块'./Home.scss'或其对应的类型声明。TS2307编译时带有警告。

无法找到模块'./BlockPosts.module.css'或其对应的类型声明。TS2307编译时带有警告。

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

在您的项目中创建一个位于/src文件夹下的文件react-app-env.d.ts并将以下内容写入其中:

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

也许你也能避免犯同样的错误

- Erick Willian · Answer 7

也许只是重新启动TS服务器就可以解决问题。

使用VsCode：

Windows：

输入：ctrl + Shift + P 或 ctrl + Shift + F5

选择：> TypeScript: Restart TS server Macbook：

输入：⇧ + ⌘ + P 或 F1

选择：> TypeScript: Restart TS server 也许只是文件错误，检查一下是否不小心将文件从.ts更改为.tsx或.tsx更改为.ts。

- Sterling Diaz · Answer 8

在我的情况下，我解决了这个问题，只需注释掉加载器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

测试这些配置更改，看看是否会发生什么事情。这样做可以节省我今天下午的时间。

- D_Gorbachev · Answer 9

在我的使用CRA创建的React应用程序中，我不得不添加react-app-env.d.ts文件：

declare module '*.css';

像上面建议的那样，在declarations.d.ts中添加此声明并没有起作用。

- cssyphus · Answer 10

在我的情况下，我已经升级了NodeJS的（主要）版本，这可能导致了问题。在前端，我还看到了一个错误，大致如下：

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

我的解决方案是：

npm cache clean --force
删除项目的 node_modules 文件夹
删除 package-lock.json 文件
npm install

完成以上步骤后，运行 npm run dev 将会显示以下信息：

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

因此，解决问题的最后一步是：

编辑 tsconfig.json 文件，在 "compilerOptions": 下添加 "baseURL": ".",，如下所示：

"compilerOptions": {
    "baseUrl": ".",
    etc etc etc

问题已在此时解决。

参考：

Node Sass无法找到当前环境的绑定