为什么webpack项目中使用局部css

在项目中,尤其是大项目中,很可能因为使用相同的css,在vue中可以直接在style中加入scope属性,而在create-react-app的react项目怎么实现这种局部的style呢

通过style-loader实现局部css

第一种方式通过style-loader的modules属性

暴露出webpack配置 如果暴露过了 省略此步骤

npm run eject 

修改配置

// config > webpack.config.dev.js 
 
 
// style files regexes 
const cssRegex = /\.css$/; 
const useable = /\.use(able)?\.css$/;  // 添加 匹配css 
const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/;  
const useableCssModuleRegex = /\.module\.css$/;   // 添加适合use.css或者useable.css结尾的文件的 排除文件名 
 
 
 
 { 
    test: cssRegex, 
    exclude: cssModuleRegex, 
    use: getStyleLoaders({ 
      importLoaders: 1, 
    }), 
  }, 
 { 
    test: useable, 
    exclude: useableCssModuleRegex, 
    use: getStyleLoaders({ 
      importLoaders: 1, 
      modules: true  // 添加到这里 
    }), 
  }, 
 

改完配置需要重新编译

 npm strat 

css 注意在配置中配置了正则,值匹配名带use.css或者useable.css为结尾的文件

//  style.use.css 
.box { 
    background: red; 
} 

组件中使用

import React, {Component} from 'react'; 
import style from './style.use.css' 
 
export default class Test extends Component { 
    render() { 
        return( 
            <div className = {style.box}> 
                <div> 
                    {'测试'} 
                </div> 
            </div> 
        ) 
    } 
} 

最终class被修改只在此组件中使用,在组件中就可以用这种方式来设置局部的css了

第二种方式

通过这种方式,不是真正的设置了局部变量,而是让style只在这个组件渲染的时候,将style添加到页面中,组件销毁之后卸载组件用的style
这种方式看起来貌似没有第一种好,但是这种方式使用起来不需要用className = {style.className},不需要任何改动,直接用 className = 'className'就可以

首先也是暴露出webpack配置 如果暴露过了 省略此步骤

npm run eject 
// config > webpack.config.dev.js 
 
修改配置 
// style files regexes 
const cssRegex = /\.css$/; 
const useable = /\.use(able)?\.css$/;  // 添加 匹配use.css或者useable.css结尾的文件 
const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/; // 这里也需要修改 需要让普通名称的css文件的loader覆盖 
const useableCssModuleRegex = /\.module\.css$/;   // 添加适合use.css或者useable.css结尾的文件的 排除文件名 
 
 
// 添加一个getUseableLoaders 
const getUseableLoaders = (cssOptions, preProcessor) => { 
  const loaders = [ 
    require.resolve('style-loader/useable'), 
    { 
      loader: require.resolve('css-loader'), 
      options: cssOptions, 
    }, 
    { 
      // Options for PostCSS as we reference these options twice 
      // Adds vendor prefixing based on your specified browser support in 
      // package.json 
      loader: require.resolve('postcss-loader'), 
      options: { 
        // Necessary for external CSS imports to work 
        // https://github.com/facebook/create-react-app/issues/2677 
        ident: 'postcss', 
        plugins: () => [ 
          require('postcss-flexbugs-fixes'), 
          require('postcss-preset-env')({ 
            autoprefixer: { 
              flexbox: 'no-2009', 
            }, 
            stage: 3, 
          }), 
        ], 
      }, 
    }, 
  ]; 
  if (preProcessor) { 
    loaders.push(require.resolve(preProcessor)); 
  } 
  return loaders; 
}; 
   ... 
   ... 
   { 
    test: cssRegex, 
    exclude: cssModuleRegex, 
    use: getStyleLoaders({ 
      importLoaders: 1, 
    }), 
  }, 
  { // 添加loader 
    test: useable, 
    exclude: useableCssModuleRegex, 
    use: getUseableLoaders({ 
      importLoaders: 1, 
    }), 
  }, 
  ... 
  ... 

改完配置需要重新编译

 npm strat 

css 注意在配置中配置了正则,值匹配名带use.css或者useable.css为结尾的文件

//  style.use.css 
.box { 
    background: red; 
} 

组件中使用

import React, {Component} from 'react'; 
import style from './style.use.css' 
 
export default class Test extends Component { 
    render() { 
        return( 
            <div className = 'box'> 
                <div> 
                    {'测试'} 
                </div> 
            </div> 
        ) 
    } 
} 

这样就之后再加载此组件中 style.use.css 才会被引用


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

图片根据容器大小自适应