Skip to content

Latest commit

 

History

History
195 lines (153 loc) · 4.41 KB

README_CN.md

File metadata and controls

195 lines (153 loc) · 4.41 KB
Raw

css-namespacing-loader

一个专门用于处理CSS命名空间的webpack loader。它是基于css-namespacing实现的。

这个loader主要有两个功能:

  • 它用于避免因第三方CSS库的引入导致的全局样式污染。

  • 在开发过程中，编译CSS代码时，它会根据配置自动将命名空间添加到指定的类名中。

快速入门

一开始，你要通过npm下载 css-namespacing-loader:

$ npm install css-namespacing-loader --save-dev

在入口文件中，你引入了bootstrap

entry.js

import 'bootstrap/dist/css/bootstrap.min.css'

然后把loader添加到 webpack 配置中。例如:

webpack.config.js

module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader:"css-namespacing-loader",
            options:{
              namespace:[
                { value: 'bsp-', path: [/bootstrap/] }
              ]
            }
          }
        ]
      }
    ]
  }
}

在通过你偏好的方式运行webpack之后，当你使用bootstrap里面的样式时，将会以 bsp-container 替代 container，例如:

<div class="bsp-container">
  <div class="bsp-row">
    <div class="bsp-col-sm">
      One of three columns
    </div>
    <div class="bsp-col-sm">
      One of three columns
    </div>
    <div class="bsp-col-sm">
      One of three columns
    </div>
  </div>
</div>

在options中, 你可以设置哪些类名不需要被添加命名空间，或者只有哪些类名需要被添加命名空间，以及命名空间的值。

另外，在CSS代码中，你可以使用@namespacing注解灵活地设置以上配置。如果你想了解更多，请查看这里。

如果你想查看关于处理后的结果，请阅读css-namespacing.

Options配置

Name Type Default Necessary Description
namespace {Array} undefined true 包含多个配置的数组

namespace

Type: Array Default: undefined

namespace数组中的元素是一个对象，它包含以下属性。

Name Type Default Necessary Description
path {Array<String/RegExp>} undefined false 包含要添加命名空间的CSS文件的匹配路径的数组
value {String} undefined false 要添加前缀的名称空间的值
not {Array<RegExp>} undefined false 包含着不会被添加命名空间的类名的数组
only {Array<RegExp>} undefined false 包含着只会被添加命名空间的类名的数组

path

Type: {Array<String|RegExp>} Default: undefined

1.在数组中使用正则表达式

例如:

options:{
  namespace:[
    { value: 'bsp-', path: [/bootstrap/] }
  ]
}

它会通过 Regexp.prototype.test 以 path.test(filepath)的方式找到匹配的文件

2.在数组中使用字符串

例如:

options:{
  namespace:[
    { value: 'bsp-', path: [path.resolve(___dirname,'./node_modules/bootstrap/dist/css/bootstrap.min.css']) }
  ]
}

他会通过 String.prototype.includes 以 filepath.includes(path)的方式找到匹配的文件

注意:由于windows和linux之间的文件分隔符不同，所以最好使用path.resolve去获取文件路径。

3.path没有定义

例如:

options:{
  namespace:[
    { 
      value: 'my-',  
    }
  ]
}

这种设置下，所有被扫描的CSS文件里的类名都被添加名称空间。.

value

Type: {String} Default: undefined

若该值为undefined,例如:

options:{
  namespace:[
    { 
      path:[/bootstrap/]
    }
  ]
}

这种配置下，被扫描到的文件不会有任何处理。

not

Type:{Array<RegExp>} Default:undefined

For example:

options:{
  namespace:[
    { 
      path:[/bootstrap/],
      not:[/^box$/]
    }
  ]
}

这种配置下，在被扫描的CSS文件中，所有名为box的类名都不会被添加命名空间。

only

For example:

options:{
  namespace:[
    { 
      path:[/bootstrap/],
      not:[/^box$/]
    }
  ]
}

这种配置下，在被扫描的CSS文件中，只有名为box的类名才会被添加命名空间。

License

MIT