Блог

Главная - Вопросы по программированию - Модули узлов не применяют css

Модули узлов не применяют css

#css #reactjs #webpack #node-modules

Вопрос:

Я новичок в разработке реакций и пытаюсь использовать webpack для настройки своего проекта. К сожалению, у меня проблема с моей конфигурацией: в ней компоненты из node_modules не применяют стили, независимо от того, пытаюсь ли я создать приложение или запустить его с помощью webpack-dev-сервера.

Мой webpack.config.js:

 const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.jsx',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    plugins: [
        new HtmlPlugin({
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /.jsx?/i,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.css$/i,
                use: 'css-loader'
            },
            {
                test: /.(png|jpe?g|ttf|svg)/i,
                use: 'file-loader'
            },
        ]
    },
    devServer: {
        port: 9000,
        contentBase: path.join(__dirname, 'dist')
    }
}

.babelrc:

 {
    "presets": ["@babel/preset-react"]
}

UPD: Я имел в виду не стили, которые я написал, а стили самих компонентов. Например, компонент кнопки primereact отображается как html-кнопка по умолчанию.

Комментарии:

1. components from node_modules don't apply styles... вы импортируете стили в свои компоненты?

2. Вы объявили файл стиля в начале каждой компонентной модели?

3. Я имел в виду не стили, которые я написал, а стили самих компонентов. Например, компонент кнопки primereact отображается как html <кнопка>по умолчанию.

4. @VladislavMaksimov Я имею в виду стили, которые есть в модуле, а не ваши собственные

5. @StudioTime Я думаю, что код, как var _style = _interopRequireDefault(require("./style.css")); внутри компонентов модулей, которые я хочу использовать, должен импортировать все стили. Все ли в порядке с моей конфигурацией? Я могу избежать этой проблемы, используя create-react-app, но я все еще хочу понять, в чем проблема.

Метки: