时间戳

首页 > 解决方案 > 在 javascript 中生成一个类以匹配现有的 sass 类名

javascript - 在 javascript 中生成一个类以匹配现有的 sass 类名

问题描述

我正在使用 webpack 生成一个 bundle.js 文件，其中包含我在单个文件中需要的所有内容，并且 webpack 编译并且似乎包含我期望的内容。我在 javascript 中动态生成 DOM 元素，我希望使用现有的 sass 类规范对其进行格式化，如下所示：

索引.scss：

    .classname {
        position: 'absolute';
        font-family: 'Roboto', sans-serif;
        color: blue;
    }

index.js：

    import styles from './css/index.scss';

    console.log(styles);

    let aDiv = document.createElement("div");
    aDiv.classList.add("classname");
    aDiv.style.top = "10px";
    document.body.append(aDiv);

    let bDiv = document.createElement("div");
    bDiv.classList.add(styles.classname);
    aDiv.style.top = "30px";
    document.body.append(bDiv);

在 Firefox 的开发者工具中，从控制台中，我可以看到样式是一个对象，具有许多 css 规则中的每一个的属性，其中之一是：

"classname": "_2mpyBRPOMJ9D3LKNxOIvrs"

在 Firefox 的 Inspector 工具中，aDiv 的类是“classname”，但没有应用该类的样式。bDiv 的类是“未定义的”，也没有应用任何样式。我不知道如何获得“_2mpyBRPOMJ9D3LKNxOIvrs”类名，每次编译时都不同，分配为一个类。但即使我从 Firefox 手动执行此操作，样式也不会应用，并且 Firefox 的样式编辑器中也不存在“类名”或“_2mpyBRPOMJ9D3LKNxOIvrs”。

是否可以通过类名动态创建从 scss 继承样式的元素？或者有没有更好的清洁方法来做到这一点，我错过了？我觉得我一定没有掌握将 webpacking css into js 的核心原则。

标签： javascriptwebpacksasses6-modules

解决方案

这是因为当您的 scss 合并为 css 到您的代码中时，缩小插件会将您的类名更改为新的引用。您可以通过配置 webpack 来禁用此行为。Thia 的答案告诉你怎么做：

如何禁用类名的 webpack 缩小

推荐阅读