Hotpack-postcss

hotpack plugin postcss

Contain three modules

• autoprefixer
• postcss-preset-env
• postcss-pxtorem

postcss-pxtorem is only used for mobile page

Useage

npm install --save-dev @duhongwei/hotpack-postcss

import postcss from '@duhongwei/hotpack-postcss'
export default {
  plugin: [
    {
      //required
      name: 'postcss',
      //required
      use: postcss,
      //Optional, Is it a mobile page,if isH5 is true,postcss-pxtorem plugin applied
      isH5: (key) => {
        return /^h5/.test(key)
      },
      //Optional,defauilt is {}, options of autoprefixer 
      autoprefixer:{}
      //Optional,defauilt is {}, options of postcss-preset-env 
      presetEnv:{},
      //Optional,defauilt is {rootValue:100,propList: ['*'] }, options of pxtorem 
      pxtorem:{rootValue:100,propList: ['*'] },
      
    }
}

css scope

css scope can be used for vue single file

from source code

<template>
 <div class='_scope'>
   <h1></h1>
 </div>
</template>
<style>
._scope{
  height:100px;
}
h1{
  color:green;
}
</style>

to compiled code

<template>
 <div class='_102'>
   <h1></h1>
 </div>
</template>
<style>
._102{
  height:100px;
}
._102 h1{
  color:green;
}
</style>

The scope in _scope will be replaced with the unique number in the project

In this way, conflicts between module styles can be avoided.