zoukankan      html  css  js  c++  java
  • 在vue-cli中使用scss以及flexible.debug

    使用scss详细步骤:

      1.安装

      npm install node-sass --save-dev

      npm install sass-loader --save-dev

      2.webpack.base.config.js在loaders里面加上

      {
            test: /.scss$/,
            loaders: ["style", "css", "sass"]
         }
     3.在页面中使用

      <style lang="scss" scoped></style>

    安装flexible.debug
      1.安装lib-flexible
        npm i lib-flexible --save
         2.在项目入口文件main.js中引入lib-flexible
        import 'lib-flexible/flexible.js'
         3.安装px2rem-loader
        npm install px2rem-loader
         4.在utils中配置,加入
        const px2remLoader = {
          loader: 'px2rem-loader',
          options: {
            remUnit: 75
          }
        }
      这里的75是根据设计写的,如果你的设计图为750,那么这里就应该填写75,也就是1/10
      
      在function generateLoaders 这个方法中 
      原来的:const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
      替换成:const loaders = [cssLoader,px2remLoader]
      5.然后重启后 ,在组件中写单位直接写px  然后在浏览器中的检查就可以看到  单位是rem
     
  • 相关阅读:
    python2和python3的区别
    星球大战
    [USACO]高低卡(金)High Card Low Card (Gold)
    学习笔记
    叶子的染色
    大问题
    ...
    考试前...
    [HAOI2010]计数
    [POI2006]OKR-Periods of Words
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/8664251.html
Copyright © 2011-2022 走看看