Hướng dẫn how do you apply global styles with css modules in a react app? - làm cách nào để bạn áp dụng các kiểu chung với các mô-đun css trong ứng dụng phản ứng?

Question

Tôi đã gặp phải vấn đề tương tự và tìm ra những cách sau để giải quyết vấn đề, bạn có thể chọn những gì áp dụng cho bạn tốt nhất

Xác định hai bộ quy tắc trong cấu hình webpack của bạn để phân tích các tệp CSS/ít hơn.
- Quy tắc đầu tiên nên bao gồm tất cả các phong cách toàn cầu, giả sử nó được giữ trong / styles / hoặc thư mục tương tự.
- Quy tắc thứ hai là xử lý tất cả các phong cách CSS có phạm vi cục bộ, chúng nên lý tưởng là bên cạnh các thành phần của chúng.
- Bạn có thể làm điều này bằng cách sử dụng tùy chọn bao gồm và loại trừ trong khi xác định quy tắcinclude and exclude option while defining a rule
- hoặc bằng cách thực thi quy tắc đặt tên và quy tắc viết phù hợp, ví dụ, tất cả các mô -đun CSS sẽ là [tên] .module.css và bài kiểm tra của bạn sẽ kiểm tra /.module.(less |[name].module.css and your test would check for /.module.(less|css)$/ and parse it.

Một mẫu được đưa ra dưới đây:

      // exclude all global styles for css modules
      {
        test: /\.(less|css)$/,
        exclude: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]'
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      // process global styles without css modules
     {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

Sử dụng: Địa phương và: Toàn cầu trong khi viết CSS/Ít hơn. Nếu các mô -đun CSS được bật, nó sẽ mặc định vào chế độ cục bộ, bạn có thể chỉ định chế độ trong các tùy chọn như dưới đây::local and :global while writing css/less. If css modules is enabled it will default to local mode, you can specify the mode in options as below:

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

Nếu bạn đang xác định chế độ là toàn cầu thì tất cả các lớp CSS được bao gồm của bạn sẽ không được thay thế bằng tên băm, thay vào đó chỉ các lớp bạn chỉ định là: cục bộ sẽ được đặt tên duy nhất. Ví dụ:

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

Xác định một chức năng kiểm tra tệp của bạn để quyết định xem đó là mô -đun CSS hay toàn cầu, được thực hiện bằng cách sử dụng tùy chọn GetLocalident. Đây là phương pháp mà tôi hiện đang sử dụng trong thiết lập của mình. Điều này cũng yêu cầu các tệp của bạn có một số quy ước đặt tên, [name] .module.less cho các mô -đun CSS và [name] .less cho các tệp thông thường. Xem ví dụ dưới đây:getLocalIdent option. This is the method that I'm currently using in my setup. This also requires your files to have some naming convention, [name].module.less for css modules and [name].less for regular files. See example below:

// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");

// inside webpack rules
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    getLocalIdent: getLocalIdent
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {

    // return local name if it's a global css file
    if (!cssModuleRegex.test(loaderContext.resourcePath)) {
        return localName;
    }

    if (!options.context) {
      // eslint-disable-next-line no-param-reassign
      options.context = loaderContext.rootContext;
    }

    const request = path
      .relative(options.context, loaderContext.resourcePath)
      .replace(/\\/g, '/');

    // eslint-disable-next-line no-param-reassign
    options.content = `${options.hashPrefix + request}+${localName}`;

    // eslint-disable-next-line no-param-reassign
    localIdentName = localIdentName.replace(/\[local\]/gi, localName);

    const hash = loaderUtils.interpolateName(
      loaderContext,
      localIdentName,
      options
    );

    return hash
      .replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_$1');
  }

Hướng dẫn how do you apply global styles with css modules in a react app? - làm cách nào để bạn áp dụng các kiểu chung với các mô-đun css trong ứng dụng phản ứng?

Tôi thích giữ tất cả các quy tắc kiểu CSS phổ biến theo kiểu CSS toàn cầu, được gọi là app.css chẳng hạn. Đối với các quy tắc kiểu chỉ liên quan đến một thành phần cụ thể, thì tôi muốn giữ một mô -đun CSS riêng biệt. Tuy nhiên, tôi muốn có thể sử dụng cùng một className ở mọi nơi. Ví dụ: tôi có thể có một lớp

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

0 được sử dụng ở mọi nơi, nhưng thành phần

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

1 của tôi cần một logo khác. Trong trường hợp này, tôi có thể muốn sử dụng cả hai mô -đun CSS và CSS toàn cầu. Đây là một khái niệm đơn giản nhưng phần khó khăn là trong các chi tiết là cấu hình webpack

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

2.

Lớp

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

0 được xác định trong toàn cầu app.css như sau:

1. Yêu cầu đặt tên mô -đun CSS

Đối với thành phần

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

1, WebPack chỉ ra rằng mô -đun CSS phải được đặt tên theo mẫu

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

6. Vì vậy, trong ví dụ này, tôi sẽ đặt tên cho nó

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

7.

2. Tên Mangling

.Logo được định nghĩa trong

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

7 như sau:

Để phân biệt hai tên lớp

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

0, WebPack thực hiện việc nâng vật nặng. Nó phân phối tên lớp

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

0 trong

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

7. Nếu chúng ta nhìn vào nguồn trang, chúng ta sẽ thấy một cái gì đó như

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

2 trái ngược với đơn giản là

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

3 trong app.css.

3. Webpack.config.js

Chúng tôi không quan tâm đến việc nâng vật nặng ở trên mà webpack làm, nhưng chúng tôi phải tuân thủ yêu cầu của nó. Chúng ta sẽ cần cấu hình 2 quy tắc khác nhau: một cho CSS toàn cầu và một quy tắc khác cho mô -đun CSS.

Quy tắc đầu tiên là cho mô -đun CSS và thứ hai là dành cho CSS toàn cầu. Bạn có thể dễ dàng nói bằng cách nhìn vào khóa

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

5 trong mỗi quy tắc.

4. Thông tin lỗi thời

Bạn có thể đã thấy một số bài viết cũ hơn cho thấy thông tin lỗi thời:

Ví dụ,

test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

hoặc

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

Chúng sẽ phá vỡ trang web biên dịch

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

6. Đừng sử dụng chúng.

4. Tiêu thụ các quy tắc kiểu CSS trong ReactJS

Viết mã cho Reactjs là phần dễ nhất:

//from global CSS
import './app.css'

return (
   
      
   
)

//from CSS Module
import styles from "./header.module.css"

return (
   
      
   
)

programming css Global style CSS CSS in ReactJS CSS module React Gatsby global styles Variable CSS React

Hướng dẫn how do you apply global styles with css modules in a react app? - làm cách nào để bạn áp dụng các kiểu chung với các mô-đun css trong ứng dụng phản ứng?

1. Yêu cầu đặt tên mô -đun CSS

2. Tên Mangling

3. Webpack.config.js

4. Thông tin lỗi thời

4. Tiêu thụ các quy tắc kiểu CSS trong ReactJS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội