javascript - React.JS 新的 CSS 模块

标签 javascript css reactjs webpack

我一直在关注 Udemy 上的 React Complete Guide 教程,但它似乎有点过时了,因为在弹出文件后,我看不到相同的代码。我认为它今天更新了,但作为一个完全的初学者,我不知道如何继续我的类(class),因为我不知道如何导入具有唯一 ID 的类或如何启用 CSS 模块工作...谢谢提前向您寻求帮助。

他所看到的: 从第162行到第169行 This is his code

 test: /\.css$/,
 use: [
   require.resolve('style-loader'),
   {
     loader: require.resolve('css-loader'),
     options: {
       importLoaders: 1,
       modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
     },
   },

我看到的是: 从第34行到第41行 This is my code

// common function to get style loaders const getStyleLoaders =
(cssOptions, preProcessor) => {   const loaders = [
 require.resolve('style-loader'),
 {
   loader: require.resolve('css-loader'),
   options: cssOptions,
 },

我还看到 /\.css$/; 有新的变量: 第28至32行

// style files regexes 
const cssRegex = /\.css$/; 
const cssModuleRegex = /\.module\.css$/; 
const sassRegex = /\.(scss|sass)$/; 
const sassModuleRegex = /\.module\.(scss|sass)$/;

最佳答案

代码

options: {
       importLoaders: 1,
       modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
     }

如上所示,从第 162 行到第 169 行可以添加到 webpack.config.dev.jswebpack.config.prod.js 的其他字段 而不是 test:/\.css$/, 你会找到 cssRegex,你可以在那个部分添加代码

 test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentIName: '[name]__[local]__[hash:base64:5]'
            }),

关于javascript - React.JS 新的 CSS 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52629708/

相关文章:

javascript - 如何删除表中的一列?

html - 如何在中间对齐多个按钮?

javascript - React 应用程序和 Laravel API 的 CORS 问题

reactjs - 如何在一个没有 Provider 但有 connect 的组件中使用 Redux 存储,因为不需要子组件?

javascript - 基于动态 bool Angular 显示div

javascript - 使用 Canvas dataURL 的问题

javascript - 网格和动态表的高度

java - 导航栏中的当前菜单链接必须保持突出显示

html - 如何切掉元素的一部分,但在 DOM 中保持可用?

javascript - 如何使用 redux-forms v6 在同一页面上创建多个表单?