步骤

  • 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. 【UVA1057】Routing

    [UVA1057]Routing 题面 洛谷 题解 有一个比较好想的dp就是\(f_{i,j}\)表示第一个点在\(i\),第二个点在\(j\)的最小点数,但是直接搞不好转移. 考虑建出反图,那么\( ...

  2. SP5971 LCMSUM 数论

    题面 题目要我们求这个: \[\sum_{i=1}^n lcm(i,n)\] 开始化式子: \[\sum_{i=1}^{n} \frac{i*n}{gcd(i,n)}\] \[\sum_{d|n} \ ...

  3. glew的安装

    下载链接: https://sourceforge.net/project/downloading.php?group_id=67586&filename=glew-1.5.1-win32.z ...

  4. 【POJ3126】Prime Path

    本题传送门 本题知识点:宽度优先搜索 题意很简单.要找一个质数变到另一个质数的最少步数,两个质数都是4位数,变的时候只能变其中一位,变了的数也仍是质数. 思路也很简单,对每一位数进行修改,如果修改后的 ...

  5. eclipse debug调试 class文件 Source not found.

      1.情景展示 明明有class文件,为什么提示没有? 2.原因分析 这是eclipse与myeclipse的不同之处,myeclipse会自动加载运行时所需的的class文件,而eclipse则需 ...

  6. HustOJ二次开发之隐藏菜单栏

    通过关键搜索: find / -name *nav.php 出现如下结果:/home/judge/src/web/template/ie/nav.php/home/judge/src/web/temp ...

  7. [技术博客] 数据库1+N查询问题

    目录 问题简述 问题解决 group的方法简化查询 改正后的代码 作者:庄廓然 问题简述 本次开发过程中我们用到了rails的orm框架,使用orm框架可以很方便地进行对象的关联和查询,例如查询一个用 ...

  8. [技术博客]采用Bootstrap框架进行排版布局

    [技术博客]采用Bootstrap框架进行排版布局 网页的前端框架有很多很多种,比如Bootstrap.Vue.Angular等等,在最开始其实并没有考虑到框架这回事,开始阅读往届代码时发现其部分采用 ...

  9. 打包文件到APK安装包中

    打包文件到APK安装包中 目的:将配置文件或SQLITE打包进APK中 1.首先,打开菜单 Project - Deployment 2.点击添加按钮,选择要添加的文件(文件最好放在工程目录中,这样, ...

  10. element UI中的select选择器的change方法需要传递多个值

    如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去) 场景: 你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去 ...