Не удается импортировать модули CSS / SCSS. TypeScript говорит: «Не удается найти модуль»

Я пытаюсь импортировать тему из модуля 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;

Что еще требуется для включения импорта модуля таблиц стилей безопасного типа?

TypeScript не знает, что есть файлы, кроме .tsили .tsxоколо того, он выдаст ошибку, если импорт имеет неизвестный суффикс файла.

Если у вас есть конфигурация веб-пакета, которая позволяет вам импортировать другие типы файлов, вы должны сообщить компилятору TypeScript, что эти файлы существуют. Для этого добавьте файл объявления, в котором вы объявляете модули с подходящими именами.

Содержимое объявляемого модуля зависит от загрузчика веб-пакета, используемого для типа файла. В конфигурации веб-пакета, которая передает *.scssфайлы через sass-loader → css-loader → style-loader , в импортированном модуле не будет содержимого, и правильное объявление модуля будет выглядеть следующим образом:

// 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.jsondev-зависимостях:

  "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.d.tsрядом с вашими mystyle.scssклассами CSS, которые вы определили, которые вы можете импортировать как модуль Typescript и использовать следующим образом:

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

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

CSS будет автоматически загружен (введен как styleэлемент в DOM) и будет содержать загадочные идентификаторы вместо ваших классов CSS в .scss, чтобы изолировать ваши стили на странице (если вы не используете :global(.a-global-class) { ... }).

Обратите внимание, что первая компиляция завершится ошибкой всякий раз, когда вы добавляете классы CSS, удаляете или переименовываете их, поскольку импортированный mystyles.d.ts - это старая версия, а не новая версия, только что созданная во время компиляции. Просто скомпилируйте снова.

Наслаждаться.

Внимание, если вы используете настройку пути tsconfig.json

Обратите внимание, что если вы используете эти решения вместе с путями tsconfig для сокращения импорта, вам потребуется дополнительная настройка.

Если вы используете такой путь tsconfig:

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

Итак, вы можете:

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

Затем вам нужно также добавить конфигурацию разрешения модулей в свой веб-пакет, например:

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

Убедитесь, что путь установлен в соответствии с вашими настройками.

Благодаря этому webpack знает, где искать, поскольку он считает, что новый путь импорта на самом деле является модулем, поэтому по умолчанию используется каталог node_modules. С этой конфигурацией он знает, где искать, и находит, и сборка работает.

Я использую typescript-plugin-css-modules

npm install -D typescript-plugin-css-modules

tsconfig.json

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