基于webpack4 sass/scss与js脚本代码共享变量

最新推荐文章于 2023-02-02 09:45:12 发布

tj_ygy

最新推荐文章于 2023-02-02 09:45:12 发布

阅读量309

点赞数

文章标签： javascript js typescript

本文链接：https://blog.csdn.net/tj_ygy/article/details/115109007

版权

本文介绍了如何利用node-sass-json-importer防止机器人非法操作页面元素。通过在编译前更新绑定的类名，并在sass中引用json文件来动态绑定样式和类名，确保页面安全性。同时，展示了在js中引用json文件进行类名绑定的方法，以实现更灵活的页面控制。

摘要由CSDN通过智能技术生成

适用场景：
防止“机器人”非法的操作页面元素进行流氓性质的操作（仅仅打包时的类名更新）
页面中元素绑定的类与sass文件中的类建立关系，项目编译前进行类名更新，编译时，程序读取配置文件信息，绑定对应类名
最终效果在这里插入图片描述

npm install node-sass-json-importer
const jsonImporter = require('node-sass-json-importer');

module/rules 配置
{
    test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", {
        loader: 'sass-loader',
        options: {
            sassOptions: {
                importer: jsonImporter()
            }
        }
    }]
},

创建json文件style.json
在这里插入图片描述

sass引用

@import "../../static/json/style.json";

使用样式值

  font-family: map-get($style, "font");
  font-size: map-get($style, "fontSize"); /*媒体*/

使用类名

  .#{map-get($className, "edit")} {
    background-color: map-get($style, "editBgColor");
  }
  .#{map-get($className, "defaultBgColor")} {
    background-color: map-get($style, "defaultBgColor");
  }

js中引用

const styleConfig = require('../static/json/style.json'); // 引入全局样式设置
console.log(styleConfig)

获取对应节点内容，在组件中进行类名绑定等等操作