Класс CSS Webpack не применяется к элементам HTML и компонентам React. ⇐ CSS
Класс CSS Webpack не применяется к элементам HTML и компонентам React.
Я создал проект с использованием Webpack, Lit2 и React.
У меня проблема с таблицами стилей CSS и компонентами React. Я создал таблицу стилей homesheet.module.css и импортировал ее в свой компонент React.
импортировать стили из '../homesheet.module.css'; экспортировать const CustomDivider = () => { возвращаться ( ); }; Мои конфигурации Webpack:
// Для наших модулей CSS они будут локально ограничены const CSSModuleLoader = { загрузчик: 'css-загрузчик', параметры: { модули: { localIdentName: '[имя]_[локальный]_[хэш:base64:5]', }, импортЗагрузчики: 1, sourceMap: false, // отключено, поскольку вызывает задержку } } // Для наших обычных CSS-файлов мы хотели бы, чтобы они были глобальными константный CSSLoader = { загрузчик: 'css-загрузчик', параметры: { импортЗагрузчики: 1, sourceMap: false, // отключено, поскольку вызывает задержку } } // Загрузчик стандартного стиля (здесь описаны продукты и разработчики) константный стильLoader = devMode? 'стиль-загрузчик': MiniCssExtractPlugin.loader; модуль.экспорт = { вход: { приложение: './index-app.js', }, модуль: { правила: [ { тест: /\.(js|jsx)$/, исключить: /node_modules/, использовать: { загрузчик: 'babel-loader', параметры: { пресеты: ['@babel/preset-react'], }, }, }, { тест: /\.css$/, исключить: /\.module\.css$/, используйте: [styleLoader, CSSLoader] }, { тест: /\.module\.css$/, используйте: [styleLoader, CSSModuleLoader] } ], }, решать: { расширения: ['.*', '.js', '.jsx'], }, плагины: [ новый HtmlWebpackPlugin({ имя файла: 'index.html', шаблон: './index.html', }), новый MiniCssExtractPlugin({ имя файла: "[имя].css", chunkFilename: "[id].css", }), ], выход: { имя файла: '[имя].bundle.js', путь: path.resolve(__dirname, 'build'), чистый: правда, }, }; Если я создаю проект, перехожу на интересующую меня страницу в любом браузере и открываю инспектор, я вижу свой элемент с назначенным именем класса, но стиль не применяется и класс не отображается на вкладке «Стиль» инспектора.
час от инспектора
стили часов из инспектора
У меня нет ошибок консоли. Можете ли вы помочь мне разобраться в этом? Я везде проверил.
Я пытался изменить файл конфигурации веб-пакета, установил css-loader и style-loader. Я также пытался использовать и импортировать CSS-лист без модуля, но ничего не помогло.
Я создал проект с использованием Webpack, Lit2 и React.
У меня проблема с таблицами стилей CSS и компонентами React. Я создал таблицу стилей homesheet.module.css и импортировал ее в свой компонент React.
импортировать стили из '../homesheet.module.css'; экспортировать const CustomDivider = () => { возвращаться ( ); }; Мои конфигурации Webpack:
// Для наших модулей CSS они будут локально ограничены const CSSModuleLoader = { загрузчик: 'css-загрузчик', параметры: { модули: { localIdentName: '[имя]_[локальный]_[хэш:base64:5]', }, импортЗагрузчики: 1, sourceMap: false, // отключено, поскольку вызывает задержку } } // Для наших обычных CSS-файлов мы хотели бы, чтобы они были глобальными константный CSSLoader = { загрузчик: 'css-загрузчик', параметры: { импортЗагрузчики: 1, sourceMap: false, // отключено, поскольку вызывает задержку } } // Загрузчик стандартного стиля (здесь описаны продукты и разработчики) константный стильLoader = devMode? 'стиль-загрузчик': MiniCssExtractPlugin.loader; модуль.экспорт = { вход: { приложение: './index-app.js', }, модуль: { правила: [ { тест: /\.(js|jsx)$/, исключить: /node_modules/, использовать: { загрузчик: 'babel-loader', параметры: { пресеты: ['@babel/preset-react'], }, }, }, { тест: /\.css$/, исключить: /\.module\.css$/, используйте: [styleLoader, CSSLoader] }, { тест: /\.module\.css$/, используйте: [styleLoader, CSSModuleLoader] } ], }, решать: { расширения: ['.*', '.js', '.jsx'], }, плагины: [ новый HtmlWebpackPlugin({ имя файла: 'index.html', шаблон: './index.html', }), новый MiniCssExtractPlugin({ имя файла: "[имя].css", chunkFilename: "[id].css", }), ], выход: { имя файла: '[имя].bundle.js', путь: path.resolve(__dirname, 'build'), чистый: правда, }, }; Если я создаю проект, перехожу на интересующую меня страницу в любом браузере и открываю инспектор, я вижу свой элемент с назначенным именем класса, но стиль не применяется и класс не отображается на вкладке «Стиль» инспектора.
час от инспектора
стили часов из инспектора
У меня нет ошибок консоли. Можете ли вы помочь мне разобраться в этом? Я везде проверил.
Я пытался изменить файл конфигурации веб-пакета, установил css-loader и style-loader. Я также пытался использовать и импортировать CSS-лист без модуля, но ничего не помогло.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение