问答

sass或webpack如何让不同的样式文件加不同前缀?

作者:admin 2021-07-06 我要评论

sass或webpack如何让不同的样式文件加不同前缀? a.scss b.scss 编译的时候让a文件的class自动加A前缀 b文件的class自动加B前缀 ### webpack 可以实现你的要求,...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

sass或webpack如何让不同的样式文件加不同前缀?
a.scss
b.scss

编译的时候让a文件的class自动加A前缀
b文件的class自动加B前缀

###

webpack可以实现你的要求,使用css-loader
配置

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: "[name]-[local]"
        }
    }
}

其中name就是文件名,local就是原有的css class,Id,keyframes

###
{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        //其中有个固定的参数modules,表示为普通的CSS样式表启用模块化
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
        // 分割线----------------------------
        // 如果上面配置有报错,则可以这样
        // css-loader从3.0.0版本开始,locaIdentName配置项的位置做了调整,由原来与modules同级调整为了modules下的一个属性。
        modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
        },
      }
    }
  ]
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI表单Object.assign处理后无法

    elementUI表单Object.assign处理后无法

  • nacos作为配置中,有时可以加载到配置

    nacos作为配置中,有时可以加载到配置

  • font-spider压缩字体后,文件大小没有

    font-spider压缩字体后,文件大小没有

  • Vue SSR babel node_modules中的一个包

    Vue SSR babel node_modules中的一个包

腾讯云代理商
海外云服务器