zoukankan      html  css  js  c++  java
  • 2.1.6 css的编译与处理 -2

    less ,sass等预处理语言的编译  --浏览器无法识别,需要编译成css才能被识别

    less

    1、less      
    2、less-loader  

    sass

    1、sass-loader
    2、node-sass
    以less为例
    rules: [ { test:
    /.less$/, use:[ //loader的执行顺序是从后往前的 { loader: 'style-loader', options:{ singleton: true, transform: './transform.js' } },{ loader: 'css-loader', options: { module: { localIdentName: '[path][name]_[local]_[hash:4]' //类名会被编译,起个别名 path-路径 name-文件名 local-本来的类名 } } },{ loader: 'less-loader' } ] } ]

    提取css代码  --把css打包成一个单独的文件 extract-text-webpack-plugin

    安装对应的插件  -->  改造成loader处的写法  -->  在plugin处添加

    -->  extract-text-webpack-plugin 

    --> 引入extract-text-webpack-plugin, 把 user 改成使用extract-text-webpack-plugin  

    -->   把 extract-text-webpack-plugin加 入 plugin 里 

    --> index.html 中使用 link 引入 <link rel="stylesheet" type="text/css" href="./src/dist/app.min.css">

    var extractTextCss=require('extract-text-webpack-plugin');
    module.exports= {
        module:{
            rules: [
         {
           test:/.less$/,
           use: extractTextCss.extract({
             fallback: { //值为style-loader
                loader: 'style-loader',
                options:{
                  // insertInfo: '#mydiv',
                  singleton: true,
                  transform: './transform.js'
                }
              },
              use: [ //执行style-loader之前要使用的loader
                {
                  loader: 'css-loader',
                  options: {
                    // module: true
                    module: {
                      localIdentName: '[path][name]_[local]_[hash:4]' //类名会被编译,起个别名 path-路径 name-文件名 local-本来的类名
                    }
                  }
                },{
                  loader: 'less-loader'
                }
              ]
           })
         }
            ]
      },
      plugins: [
        new extractTextCss({
          filename: '[name].min.css'
        })
      ]
    }
    指定公用的 browsersList 
    1、在项目中新建 .browserslistrc 文件,,,不太清楚
    2、在package.json中指定  --- 更推荐
      "browserslist":[
        ">1%","last 2 versions"
      ] 

    postcss 的插件 自动补充前缀和使用下一个css样式

    安装:

    cnpm install postcss postcss-loader autoprefixer postcss-cssnext --save

    终结版

    var extractTextCss=require('extract-text-webpack-plugin');
    module.exports= {
        entry:{
         app:"./app.js",
        },
        output:{
            path:__dirname+"/src/dist",
            filename:"./[name].bundle.js"
        },
         resolve:{
         alias: {
           a2:"./js/app2.js",
         }
         },
        module:{
            rules: [
         {
           test:/.less$/,
           use:extractTextCss.extract({
            fallback:{
               loader:'style-loader',
               options:{
                //insertInto:"#mydiv",
                singleton:true,
                //transform:"./transform.js"
               }
             },
              use:[       
               {
                 loader:'css-loader',
                 options:{
                   modules:{
                    localIdentName:'[path][name]_[local]_[hash:4]'
                   }                    
                 } 
               },
               {
                 loader:'postcss-loader',
                 options:{
                  ident:'postcss',
                  plugins:[
                    // require('autoprefixer')({
                    //   'overrideBrowsersList': [
                    //     ">1%","last 2 versions"
                    //   ]
                    // }),
                   require('autoprefixer')(), //配置公共的了,就不需要再设置
                   require('postcss-cssnext')()  //使用下一个css
                  ]
                 }
               },
               {
                loader:'less-loader'
               }        
              ]         
           })
         }
            ]
        },
      plugins:[
       new extractTextCss({
        filename:'[name].min.css'
       })
      ]
    }
  • 相关阅读:
    LeetCode 230. Kth Smallest Element in a BST
    LeetCode 114. Flatten Binary Tree to Linked List
    LeetCode 222. Count Complete Tree Nodes
    LeetCode 129. Sum Root to Leaf Numbers
    LeetCode 113. Path Sum II
    LeetCode 257. Binary Tree Paths
    Java Convert String & Int
    Java Annotations
    LeetCode 236. Lowest Common Ancestor of a Binary Tree
    LeetCode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/slightFly/p/12293573.html
Copyright © 2011-2022 走看看