stylus

第六章 旅游网站首页开发 首页导航栏 根据设计稿完成页面的布局： 在正式编写代码之前，先来介绍一下 stylus 这是一种与 less、sass 一样的功能，可以帮助我们快速完成css代码的编写。请使用一下命令进行安装： npm install stylus --save npm install stylus-loader --save 开始编写 header 页面： < template > < div class = " header " > < div class = " header-left " > 返回 </ div > < div class = " header-input " > 输入城市景点/游玩/主题 </ div > < div class = " header-right " > 城市 </ div > </ div > </ template > < script > export default { name : 'HomeHeader' } </ script > <!-- 要使用stylus使用lang标识，只想对当前组件有效使用scoped --> < style lang = " stylus " scoped > .header display : flex color : #fff background : #00bcd4 line

1.安装stylus和loader $npm install stylus stylus-loader --save-dev 2.webpack配置（红色部分） module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, { test:/\.styl$/, //add(stylus) loader: 'style-loader!css-loader!stylus-loader' } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js'

前提说明 为了写样式方便快速，现在很多时候写样式都是使用预处理器了，预处理器有很多，包括 Sass、Less、Stylus 等。在这里选用的预处理器是 Stylus。 需要用到的模块： stylus stylus-loader 文件的后缀名： .styl 准备工作 首先，还是把需要的依赖安装一下 package.json ： "scripts": { "webpack": "webpack" }, "devDependencies": { "css-loader": "^1.0.0", "mini-css-extract-plugin": "^0.4.2", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } 其次，就是准备 Webpack 的配置文件 webpack.config.js ，当然，这个配置文件是一部分： const { join, relative } = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const config = {}; config.mode = 'production'; config

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 话不多说，直奔主题。 我们为什么要用样式穿透？ 因为有<style lang="stylus" scoped >中的 scoped 会限制我们去改变除当前这个组件以外的样式。举个例子，请结合图片来看例子哦。🙂 .wrapper 是小编在项目里定义的一个类名。 .swiper-pagination-bullet-active 是 类名.wrapper下的子级。 >>> 样式穿透 .wrapper >>> .swiper-pagination-bullet-active 如： 所有wrapper里面所有子组件只要出现 swiper-pagination-bullet-active，就让它都变成红色。 ^_^乍一听，像不像一个下一个咒。 相信写过项目的小伙伴们都看到过！ 它表示优先最高。 background red !important 设置router.js页面路由的核心代码： 找到 router.js文件打开。 像这两句是固定要写的： import Vue from 'vue' import Router from 'vue-router' 而像 ： import Home from '@/pages/home/Home' import Home from '@/pages/city/City'