在vue-cli中使用css-loader实现css module_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

【前言】

无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化。

例子:

<div>
    <div class="demo">
        <div class="child"></
        div>
    </div>
</div>
<script>
// some code
<script/>
<style lang="less" scoped>
  .demo {
    height: 100px;
    padding-top: 20px;
    background-color: grey;
    /deep/.child {
      color: red;
    }
  }
</style>

在react中使用上是这么搞的(基于css-loader):

//test.less
.demo {
    height: 100px;
    padding-top: 20px;
    background-color: grey;
    :global(.child) {
        color: red
    }
}
import styles from './test.less'

// some code

<div className={styles.demo}>
    <div class="child"></div>
</div>

不得不说,在使用上还是vue比较方便。

如果硬要在vue中使用css-loader实现css module的这套解决方案呢?这里以vue-clie 3.x为例。

无论在vue的脚手架vue-cli中还是在react的脚手架umi中,,现在都使用了webpack-chain来实现配置webpack.

这里在vue-cli脚手架创建的项目根目录下,新建vue.config.js,并写入如下内容:

module.exports = {
  chainWebpack: (config) => {
    config.devServer
      .proxy({
        '/api': {
          target: 'http://localhost:3000',
          pathRewrite: { '^/api': '', },
        },
      })
      .port(9000);

    config.module
    .rule('less')
    .oneOf('normal-modules')
    .test(/.less$/)
    .use('css-loader')
    .tap(options => {
      return Object.assign(options, {
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
          auto: /\.less$/i,
        },
      })
    });

  },
};

本来其实也不用写这段内容,默认情况,vue-cli的脚手架已经配置了css-loader的模块化,但是需要把less文件命名成xxx.module.less的形式,这和umi那套不同,也不方便,这样配置然后重启,就能像react一样写css了,另外把引入的style存入data中。这里只是说下可以在vue-cli使用css-loader的那套解决方案,但最佳实践还是用vue自带的那套

到此这篇关于在vue-cli中使用css-loader实现css module的文章就介绍到这了,更多相关vue-cli使用css module内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css 命名:bem, scoped css, css modules 与 css-in-js详解
  • 使用loader.css和css-spinners来制作加载动画的方法
  • css3制作ajax loader icon实现思路及代码
  • 怎么使用babel-plugin-import引入antd的字体
  • webpack对样式的处理 导入样式require和import的区别
  • webpack postcss-loader 自动引进postcss.config.j...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程vue-clicssmodulecss 命名:bem, scoped css, css modules 与 css-in-js详解使用loader.css和css-spinners来制作加载动画的方法css3制作ajax loader icon实现思路及代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字在vue-cli中使用css-loader实现css module浅谈解决space-evenly兼容性问题的两种方法纯css实现div悬浮的示例代码(固定位置)详解如何解决position:fixed固定定位偏移问题使用纯 css 实现滚动阴影效果探索css属性*-gradient的实用价值css仿苹果平滑开关按钮效果css实现弹窗上下左右居中且背景透明锁定窗口效果css 利用 position + margin 实现固定盒子横向纵向居css 鼠标悬浮在图片上添加遮罩层效果的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved