Question

我在React应用程序中发现CSS模块，我也使用Webpack。

我编辑webpack配置文件，尝试使用css文件更改段落的颜色以进行测试，但未应用样式。

Visual Studio代码告诉我找不到模块，但是我尚未输入文件的正确路径。

我认为webpack配置文件有问题。

我做了很多研究，尝试了不同的解决方案...

在此先感谢您的帮助和答复

我试图按照本网站的说明=> https://javascriptplayground.com/css-modules-webpack-react/

我对堆栈溢出进行了研究，我尝试了不同帖子中提出的几种解决方案，但仍然无法正常工作。

然后我查看webpack文档以添加加载程序“ 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模块更改段落的颜色，但是样式不适用于刷新页面。

样式css模块未应用[React + Webpack]

0 个答案: