Блог

Главная - Вопросы по программированию - Импорт css-файлов в typescript-файлы с использованием псевдонимов, webpack

Импорт css-файлов в typescript-файлы с использованием псевдонимов, webpack

#reactjs #typescript #webpack #loader #css-loader

Вопрос:

я создал проект с использованием webpack, react и typescript. Сейчас я пытаюсь использовать псевдонимы для импорта, что по большей части отлично работает. Однако я не могу заставить импортировать css-файлы для работы с псевдонимами.

Я добавил следующую часть в свой webpack.config.json 

 ...
    resolve: {
        extensions: ["", ".ts", ".tsx", ".js", ".json", "css", ".scss"],
        alias: {
            BaseComponents: path.resolve(__dirname, "src", "BaseComponents"),
            Pages: path.resolve(__dirname, "src", "Pages"),
            Styles: path.resolve(__dirname, "src", "Styles"),
        },
    },
    module: {
        rules: [
            {
                test: /.(ts|tsx)$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /.(css)$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },

...

и следующая часть к tsconfig.json 

 ...
    "paths": {
            "BaseComponents/*": ["./src/BaseComponents/*"],
            "Pages/*": ["./src/Pages/*"],
            "Styles/*": ["./src/Styles/*"],
     },
...

Импорт других компонентов react и обычных функций работает должным образом.

Когда я пишу

 import "../Styles/test.css";

это прекрасно работает. Но используя псевдоним

 import "Styles/test.css";

не работает, хотя ide не жалуется, и intellisense работает при вводе пути.

Ошибка в том, что ERROR in ./src/BaseComponents/App.tsx 3:0-25 Module not found: Error: Can't resolve 'Styles/test.css'

Кто-нибудь знает, как это решить?

Спасибо.

Метки: ,