步骤

  • module <style> -> <style module>
  • class='header' -> :class='$style.header'
<template>
<div :class="$style.header"></div>
</template> <style module>
.header {
color: #555;
}
</style>

原理

  • $style 是命名空间
  • 编译css module时,会把css中的选择器放到 $style 这个命名空间里

vue css module的更多相关文章

  1. Vue中scoped css和css module比较

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </st ...

  2. 如使用Typescript撸Vue(Vue2 + TS +TSX+CSS module)

    Vue对TS的支持一致不太好,连Vue作者尤大也自嘲真香压错了宝.期待Vue3.0会用TS重构且会有较大改进.不过目前有一些第三方的库可以曲线优化对TS的支持.主要就介绍下过下面两个库来写Vue. 总 ...

  3. 同时使用antd和css module

    同时编译antd和css module,需要设置两次less识别. { test: /\.less$/, exclude: path.resolve(__dirname, './node_module ...

  4. webpack项目轻松混用css module

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css mo ...

  5. css module

    来源:CSS Modules 用法教程 后面项目地址:https://github.com/947133297/lwj-webpack-demo 关键是打开这一行,表示开启loader的css mod ...

  6. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  7. vue css采用别名引入背景图

    在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...

  8. create-react-app 构建的项目使用 css module 方式来书写 css

    先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...

  9. CSS Module解决全局或本地使用@keyframes无效问题

    最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...

随机推荐

  1. JVM参数笔记

    Java启动参数共分为三类: 其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容: 其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足, ...

  2. uni-app 网络请求

    uni.request发起网络请求 url 开发者服务器接口地址 data 请求的参数 header method dataType responseType 设置响应的数据类型 statusCode ...

  3. Xilinx ISE中Synplicity.ucf无法加上去的问题

    在Xilinx ISE中使用Synplify pro进行综合时,有时出现无法将synplicity.ucf添加进工程的问题.这时可以在其它目录下备份synplicity.ucf, 然后使用clean ...

  4. GoCN每日新闻(2019-11-07)

    GoCN每日新闻(2019-11-07) GoCN每日新闻(2019-11-07) 1. [译] 排序运行时间能否做到 O(n)?让 Go 语言来告诉你 https://mp.weixin.qq.co ...

  5. webpack4.0构建项目流程

    webpack4.0构建项目流程,具体的就不一一唠叨了,这里给出构建流程步骤: 流程大图: 下载高清大图

  6. Linux系统中日志级别详情

    日志信息分类 1.等级由低到高:debug<info<warn<Error<Fatal; 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系 ...

  7. 【Swoole】计一次swoole_server配合laravel5启动报错:Address already in use[98]

     [2019-11-11 11:42:25 @21371.0] WARNING swSocket_bind(:434): bind(0.0.0.0:9501) failed, Error: Addre ...

  8. win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件

    win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件   1.去git上下载react-devtools文件到本地,https://github.com/fac ...

  9. mybatis如何接受map类型的参数

    Mybatis传入参数类型为Map   mybatis更新sql语句: ? 1 2 3 4 5 6 7 8 9 <update id="publishT00_notice" ...

  10. jdk1.8使用枚举类

    package com.mq; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public enum ...