原生js写网站能引入scss嘛
时间: 2023-06-19 21:07:02 浏览: 96
原生的 JavaScript 并不支持直接引入 SCSS 文件,因为 SCSS 是一种 CSS 预处理器,需要先编译成 CSS 文件才能被浏览器识别。
你可以使用 Sass 或者 Less 等工具将 SCSS 编译成 CSS 文件,然后在 HTML 页面中引入 CSS 文件。
如果你想在 JavaScript 中动态加载 CSS 文件,可以使用以下代码:
```javascript
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'path/to/your/css/file.css';
document.getElementsByTagName('head')[0].appendChild(link);
```
这段代码会在页面头部动态创建一个 link 标签,然后将 CSS 文件的链接添加到 href 属性中,最后将 link 标签添加到 head 标签中。这样就能动态加载 CSS 文件,实现样式的动态更新。
相关问题
scss中动态引入scss文件
在scss中动态引入scss文件有两种方式:使用@import和使用sass-resources-loader。
1. 使用@import:在scss文件中使用@import 'url'语句可以引入外部的scss文件。可以使用相对路径或绝对路径指定要引入的文件。例如:@import '../common.scss'。
2. 使用sass-resources-loader:sass-resources-loader是一个webpack loader,可以将指定的scss文件自动注入到所有的scss文件中。在webpack配置文件中配置sass-resources-loader,指定要注入的scss文件路径即可。例如:{ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../common.scss') } }。
uniapp引入scss失败
在uniapp中,如果你在引入scss变量时发现不生效,可能是由于驼峰命名的原因。在uniapp中,scss变量的命名需要使用短横线(-)而不是驼峰命名法。例如,使用驼峰命名的背景颜色变量是不会生效的,而改成使用短横线的命名方式就可以解决这个问题。
如果你在引入uview-ui这个ui框架后遇到了问题,可以在项目根目录下的uni.scss文件中引入uview对应的样式文件来解决。具体的做法是在uni.scss中添加以下代码:@import "@/uni_modules/uview-ui/theme.scss";
此外,如果你需要寻找其他可用的uni-app插件,你可以访问uni-app官方提供的插件地址https://ext.dcloud.net.cn/。在这个网站上你可以搜索到各种可用的插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp中背景颜色使用scss变量不生效](https://blog.csdn.net/weixin_41884808/article/details/128458511)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp引入uview-ui 报错:$u-badge-primary: $u-primary !default;](https://blog.csdn.net/weixin_42728767/article/details/129924800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)