无法导入 CSS/SCSS 模块.TypeScript 说“无法找到模块" [英] Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

问题描述

我正在尝试从 CSS 模块导入主题，但 TypeScript 出现无法找到模块"错误，并且该主题未应用于运行时.我认为我的 Webpack 配置有问题，但我不确定问题出在哪里.

我正在使用以下工具:

"typescript": "^2.0.3""webpack": "2.1.0-beta.25""webpack-dev-server": "^2.1.0-beta.9"反应":^ 15.4.0-rc.4"反应工具箱":^1.2.3"节点 sass":^3.10.1"样式加载器":^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');模块.出口 = {入口: ['webpack-dev-server/client?http://localhost:8080','webpack/hot/dev-server','./src/index.tsx',],输出: {路径:path.resolve(__dirname, 'dist'),publicPath: 'http://localhost:8080/',文件名:'dist/bundle.js',},开发工具:'源地图'，解决: {扩展名:['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],},模块: {规则:[{测试:/.js$/,loader: 'source-map-loader',排除:/node_modules/，强制执行:'预'，}, {测试:/.tsx?$/,loader: 'tslint-loader',排除:/node_modules/，强制执行:'预'，}, {测试:/.tsx?$/,装载机: ['react-hot-loader/webpack','awesome-typescript-loader',],排除:/node_modules/，}, {测试:/.scss$/,加载器:['样式'，'css'，'sass']}, {测试:/.css$/,加载器:['样式'，'css']}],},外部:{'反应':'反应'，'反应-DOM':'反应DOM'},插件: [新的 sassLintPlugin({glob: 'src/**/*.s?(a|c)ss',忽略文件:['src/normalize.scss']，failOnWarning: false,//这样做.}),新的 webpack.HotModuleReplacementPlugin(),],开发服务器:{内容库:'./'},};

和我尝试导入的 App.tsx :

import * as React from 'react';从反应工具箱"导入 { AppBar }；从react-toolbox/components/app_bar/theme.scss"导入 appBarTheme//本地 ./theme.scss 样式表也未找到接口 IAppStateProps {//还没有道具}接口 IAppDispatchProps {//还没有状态}类 App 扩展了 React.Component<IAppStateProps &IAppDispatchProps，任何>{构造函数(道具:IAppStateProps & IAppDispatchProps){超级(道具)；}公共渲染(){返回 (<div className='wrapper'><AppBar title='My App Bar' theme={appBarTheme}></AppBar>

);}}导出默认应用程序；

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

解决方案

TypeScript 不知道除了 .ts 或 .tsx 之外还有其他文件，所以它会抛出如果导入的文件后缀未知，则会出错.

如果你有一个允许你导入其他类型文件的 webpack 配置，你必须告诉 TypeScript 编译器这些文件存在.为此，请添加一个声明文件，您可以在其中声明具有合适名称的模块.

要声明的模块的内容取决于用于文件类型的 webpack 加载器.在 webpack 配置中，通过 sass-loader → css-loader → style-loader 管道 *.scss 文件，导入的模块中将没有内容，正确的模块声明如下所示:

//声明.d.ts声明模块'*.scss';

如果加载器是为 css-modules 配置的，只需像这样扩展声明:

//声明.d.ts声明模块'*.scss'{const 内容:记录<字符串，字符串>；导出默认内容；}

I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'm not sure where the problem is.

I'm using the following tools:

"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"

Here is my 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: './'
  },
};

and my App.tsx where I'm trying to import:

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;

What else is required to enable typesafe stylesheet module importing?

解决方案

TypeScript does not know that there are files other than .tsor .tsx so it will throw an error if an import has an unknown file suffix.

If you have a webpack config that allows you to import other types of files, you have to tell the TypeScript compiler that these files exist. To do so add a declaration file in which you declare modules with fitting names.

The content of the module to declare depends on the webpack loader used for the file type. In a webpack configuration that pipes *.scss files through sass-loader → css-loader → style-loader, there will be no content in the imported module, and the correct module declaration would look like this:

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

If the loaders are configured for css-modules just extend the declaration like this:

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

这篇关于无法导入 CSS/SCSS 模块.TypeScript 说“无法找到模块"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！