构建工具集成

CSS预处理器与构建工具集成

本节主要学习Webpack如何与Css预处理集成,讲解了Sass、Less和PostCss组合集成等。

01-20侠课岛    初级拔高       

前端/前端/前端系列课程P2 14     0     487

(五)预处理器与构建工具集成

1:webpack环境布置

  • 搭建webpack环境

    • package.json
    npm init
    {
      "name": "postcss",
      "version": "1.0.0",
      "description": "learn postcss",
      "main": "index.js",
      "scripts": {
        "build": "webpack --config webpack.config.js"
      },
      "author": "eric",
      "license": "ISC",
      "devDependencies": {}
    }
    • webpack依赖包
    npm install webpack webpack-cli --save-dev
    • webpack.config.js
    const path = require('path');
    
    module.exports = {
      entry: './index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
    };
    • 打包index.js
    import './style.css';
    
    function app() {
      var element = document.createElement('div');
      element.innerHTML = 'Hello Word!';
      element.classList.add('header');
      return element;
    }
    
    document.body.appendChild(app());
    • 分离css
    npm install css-loader --save-dev
    npm install extract-text-webpack-plugin@next --save-dev
    npm install postcss-loader --save-dev
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: [
                "css-loader",
              ]
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("bundle.css"),
    ]
    ...

2:Webpack集成Less

   npm install less less-loader --save-dev
   {
     test: /\.less$/,
     use: ExtractTextPlugin.extract({
         fallback: "style-loader",
         use: [
           "css-loader",
           "less-loader",
         ]
     })
   }
   .borde_style {
     border-top: solid 1px #595959;
     border-bottom: solid 2px #595959;
   }
  #header a {
    color: #111;
    .borde_style;
  }

  #header span {
    height: 16px;
    .borde_style;
  }

  #header p {
    color: red;
    .borde_style();
  }

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

14

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?