Я обнаруживаю модули CSS в приложении реагирования, я также использую Webpack.
Я редактирую файл конфигурации веб-пакета, пытаюсь изменить цвет абзаца, используя для проверки файл css, но стиль не применяется.
Код Visual Studio сообщает, что модуль не найден, но я еще ввел правильный путь к файлу.
Я думаю, что это проблема с файлом конфигурации веб-пакета.
Я провел много исследований, пробовал разные решения ...
Заранее благодарю за помощь и ответы
Я пытался следовать учебному пособию на этом сайте => https://javascriptplayground.com/css-modules-webpack-react/
Я исследовал переполнение стека, пробовал несколько решений, предложенных в разных статьях, но это все равно не работает.
Затем я проверяю документацию веб-пакета, чтобы добавить загрузчики "style-loader" и "css-loader"
Файл конфигурации Webpack
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'standard-loader',
exclude: /node_modules/
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader' ]
}
],
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx','css']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Файл CSS
.title {
color: yellow;
font-size: 124px;
}
Фрагмент кода теста
import styles from './home.css';
<p className={styles.title}>hello world</p>
Я хочу изменить цвет абзаца, используя модуль CSS, но стиль не применяется к обновлению страницы.