CSS Modules 解決 react 項目 css 樣式互相影響的問題

時間 2019-11-24

標籤 css modules 解決 react 項目樣式互相影響問題欄目 CSS 简体版

原文原文鏈接

1. CSS Modules引入目的

　　寫過CSS的人，應該都對一大長串選擇器選中一個元素不陌生吧，這種方式，其實定義的就是全局樣式，咱們時常會由於選擇器權重問題，沒有把咱們想要的樣式加上去。javascript

　　另外，每次都須要把全部的樣式表都導入到程序中，若是咱們能夠像使用js模塊同樣，想用哪塊就用哪塊，是否是就很理想了。css

　　CSS Modules就解決了這個問題，它自動爲每個類生成一個哈希值，能夠唯一標誌這個類，所以避免了咱們說的第一個問題，它讓咱們能夠像使用js模塊那樣，想用哪部分樣式，就引入哪部分樣式。下面咱們來具體介紹它的使用方法。html

2.CSS Modules使用方法

　　1) 如何在開啓CSS Modules

　　create-react-app 腳手架引入 css-modulesjava

modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'

　　webpack.config.dev.jsnode

{
  test: /\.less$/,
  exclude: /node_modules|antd\.css/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules:true,
        localIdentName:'[name]__[local]__[hash:base64:5]'
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ],
},
{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ],
},

　　webpack.config.prod.jsreact

{
  test: /\.less$/,
  exclude: /node_modules|antd\.css/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve('style-loader'),
          options: {
            hmr: false,
          },
        },
        use: [
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules:true,
              localIdentName:'[name]__[local]__[hash:base64:5]',
              minimize: true,
              sourceMap: shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('less-loader') // compiles Less to CSS
          }
        ],
      },
      extractTextPluginOptions
    )
  ),
  // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    Object.assign(
      {
        fallback: {
          loader: require.resolve('style-loader'),
          options: {
            hmr: false,
          },
        },
        use: [
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              minimize: true,
              sourceMap: shouldUseSourceMap,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },
      extractTextPluginOptions
    )
  ),
  // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

　　2）CSS Modules用法

　　1.基本使用方法webpack

　　在你的項目中，添加一個CSS文件，而後你就能夠像引入js模塊同樣，在你的js文件中引入這個文件存放到一個對象中。這個對象中是一個包含連個屬性的對象，其值就是自動生成的類名。這個類名也會替換頁面中的類名。git

style.scssgithub

/* style.scss */
.bgRed {
    background-color: #f00;
}

app/app.jsweb

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入咱們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義咱們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {white: "_24PAw-tvdzL8pt4nyAvnJX", bgRed: "_2R9YNZv7rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body );

最終頁面結構，以下圖所示：

　　2. 自定義命名規則

　　上面生稱的類名，徹底是自動生成，若是本身本身規定命名規則呢，也是很簡單的，只須要在上面配置modules後面添加&localIdentName＝配置規則，如：

 
  'css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]'  
  //style__bgRed-2R9YN,local對應所在文件夾名，local對應文件名，最後是哈希值

　　3. 全局類名和本地類名

　　咱們可使用:global(className)來標識這個類是全局類名，所以CSS Modules不對其類名進行轉化，:local(className)則相反，若是不用這兩個包裹的話，默認是local.

style.scss

/* style.scss */
.bgRed {
    background-color: #f00;
}

// 添加全局bgRed
:global(.bgRed) {
    
}

app/app.js

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入咱們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義咱們的組件*/
function Title() {
    console.log(styles);
    return (
        /* 在組件中全局的bgRed,此時咱們能夠訪問到咱們全局定義的bgRed，它並無被轉化 */
        <h1 className="bgRed"}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body );

　　4. 使用composes組合樣式

　　咱們知道，node.js中，咱們能夠用require引入模塊，而後使用它們。CSS Modules也提供了composes來該文件中的樣式規則，甚至引用其它文件中的樣式規則。

style/style.scss

/* style/style.scss */

.fontWhite {
    color: #fff;
}
.bgRed {
    composes: fontWhite;
    background-color: #f00;
}

app/app.js

/* app/app.js */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/* 引入咱們定義的.scss文件 */
import styles from '../style/style.scss';

/* 使用無狀態函數定義咱們的組件*/
function Title() {
    console.log(styles);
    /* 打印引入的styles，是一個包含連個屬性的對象，其值就是自動生成的類名
        Object {fontWhite: "style__fontWhite-3jipu", bgRed: "style__bgRed-2R9YN style__fontWhite-3jipu"}rx_o02FHxKTBzC"}
     */
    return (
        /* 在組件中引用 */
        <h1 className={styles.bgRed}>Hello React!</h1>
    );
}

/* 渲染到頁面中 */
ReactDOM.render(<Title />, document.body )

此時，就是添加了兩個類，html結構以下圖：

引入其它文件中的樣式規則，寫composes： className(要引入的類名) from '引入的文件路徑便可'，最終效果同上，composes多少規則，就添加多少類。

最後：你們有名有發現，我一直都在類上作文章，那是由於CSS Modules只轉換class名相關的樣式。你們要注意啦。

在最後，給你們提供一個js庫——classnames類庫，給個人感受和angular中的ng-class差很少，將值爲true的類添加上。