如何在import语句中使用变量？Django环境下CSS导入求助

首先得明确：你在JS里用@import ${main_css}``是无效的，因为@import是CSS专属语法，JavaScript引擎根本不会解析它，这就是DOM没变化的核心原因。下面给你几个可行的解决方案：

方案1：用JS动态创建link标签加载CSS（最推荐） #

直接替换JS里的import '../../css/main.css'为以下代码，通过动态创建<link>标签的方式引入CSS，这样就能正常使用你定义的全局main_css变量了：

// main.js 中的替换代码
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = main_css; // 这里直接用全局变量
document.head.appendChild(cssLink);

这个方法的好处是不需要修改Django的配置，纯前端逻辑就能解决，而且能确保CSS路径是Django生成的正确静态资源URL。

方案2：确保全局变量的加载顺序 #

要注意：声明main_css的<script>标签必须在你的main.js之前加载，否则JS运行时会找不到这个变量。比如你的index.html里的顺序应该是这样：

<!-- 先定义全局变量 -->
<script type="text/javascript"> const main_css = "{% static 'css/main.css' %}" </script>
<!-- 再引入你的JS文件 -->
<script src="{% static 'js/main.js' %}"></script>

方案3：如果是第三方JS无法修改，用Django模板渲染JS文件 #

如果这个JS是第三方的，你不想直接修改源码，可以把它改成Django模板文件（比如重命名为main.js.html），然后在文件里直接用Django的{% static %}标签替换路径：

// main.js.html 中的代码
// 替换原有的import语句
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = "{% static 'css/main.css' %}";
document.head.appendChild(cssLink);

之后在视图里渲染这个模板文件返回，或者在你的HTML里用{% include %}引入（不过更推荐通过视图返回，保持静态资源的加载逻辑清晰）。

为什么原方法无效？ #

再强调一次：JavaScript中没有@import加载CSS的语法，@import只能写在CSS文件或者HTML的<style>标签里。你把CSS的语法写进JS，浏览器完全不知道该怎么处理，自然不会有任何DOM变化。

内容的提问来源于stack exchange，提问作者Sahil