{"id":170,"hash":"c7dafa078a3d59ffe7747f361b22d225d83618d577ae46aeae6860f555ca95df","pattern":"Can&#39;t import CSS/SCSS modules. TypeScript says &quot;Cannot Find Module&quot;","full_message":"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.\n\nI'm using the following tools:\n\n\"typescript\": \"^2.0.3\"\n\"webpack\": \"2.1.0-beta.25\"\n\"webpack-dev-server\": \"^2.1.0-beta.9\"\n\"react\": \"^15.4.0-rc.4\"\n\"react-toolbox\": \"^1.2.3\"\n\"node-sass\": \"^3.10.1\"\n\"style-loader\": \"^0.13.1\"\n\"css-loader\": \"^0.25.0\"\n\"sass-loader\": \"^4.0.2\"\n\"sass-lint\": \"^1.9.1\"\n\"sasslint-webpack-plugin\": \"^1.0.4\"\n\nHere is my webpack.config.js\n\nvar path = require('path');\nvar webpack = require('webpack');\nvar sassLintPlugin = require('sasslint-webpack-plugin');\n\nmodule.exports = {\n  entry: [\n    'webpack-dev-server/client?http://localhost:8080',\n    'webpack/hot/dev-server',\n    './src/index.tsx',\n  ],\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    publicPath: 'http://localhost:8080/',\n    filename: 'dist/bundle.js',\n  },\n  devtool: 'source-map',\n  resolve: {\n    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],\n  },\n  module: {\n    rules: [{\n      test: /\\.js$/,\n      loader: 'source-map-loader',\n      exclude: /node_modules/,\n      enforce: 'pre',\n    }, {\n      test: /\\.tsx?$/,\n      loader: 'tslint-loader',\n      exclude: /node_modules/,\n      enforce: 'pre',\n    }, {\n      test: /\\.tsx?$/,\n      loaders: [\n        'react-hot-loader/webpack',\n        'awesome-typescript-loader',\n      ],\n      exclude: /node_modules/,\n    }, {\n      test: /\\.scss$/,\n      loaders: ['style', 'css', 'sass']\n    }, {\n      test: /\\.css$/,\n      loaders: ['style', 'css']\n    }],\n  },\n  externals: {\n    'react': 'React',\n    'react-dom': 'ReactDOM'\n  },\n  plugins: [\n    new sassLintPlugin({\n      glob: 'src/**/*.s?(a|c)ss',\n      ignoreFiles: ['src/normalize.scss'],\n      failOnWarning: false, // Do it.\n    }),\n    new webpack.HotModuleReplacementPlugin(),\n  ],\n  devServer: {\n    contentBase: './'\n  },\n};\n\nand my App.tsx where I'm trying to import:\n\nimport * as React from 'react';\n\nimport { AppBar } from 'react-toolbox';\nimport appBarTheme from 'react-toolbox/components/app_bar/theme.scss'\n// local ./theme.scss stylesheets aren't found either \n\ninterface IAppStateProps {\n  // No props yet\n}\n\ninterface IAppDispatchProps {\n  // No state yet\n}\n\nclass App extends React.Component<IAppStateProps & IAppDispatchProps, any> {\n\n  constructor(props: IAppStateProps & IAppDispatchProps) {\n    super(props);\n  }\n\n  public render() {\n    return (\n\n        <div className='wrapper'>\n          <AppBar title='My App Bar' theme={appBarTheme}>\n          </AppBar>\n        </div>\n\n    );\n  }\n}\n\nexport default App;\n\nWhat else is required to enable typesafe stylesheet module importing?","ecosystem":"npm","package_name":"typescript","package_version":null,"solution":"TypeScript does not know that there are files other than .ts or .tsx so it will throw an error if an import has an unknown file suffix.\n\nIf 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.\n\nThe 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:\n\n// declaration.d.ts\ndeclare module '*.scss';\n\nIf the loaders are configured for css-modules just extend the declaration like this:\n\n// declaration.d.ts\ndeclare module '*.scss' {\n    const content: Record<string, string>;\n    export default content;\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/40382842/cant-import-css-scss-modules-typescript-says-cannot-find-module","votes":272,"created_at":"2026-04-19T04:41:26.285518+00:00","updated_at":"2026-04-19T04:51:08.340050+00:00"}