问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue的style src和style @import有什么区别吗？

头像
生峰狼牙人
    42174963
     <style src="/static/home.css" scoped></style>
<style scoped>
    @import url("/static/home.css");
</style>

    代码如上，如果使用@import的方式的话，不同组件切换后，发现页面都乱了，审查元素发现<head>里面有多个css，虽然加了scoped，但是没有用，后来百度搜索，发现sf上也有个问题，和我一样，答案里面推荐使用src引用css，试了下，每个组件对应了每个css，页面正常了。然后就有疑惑了，这两种有什么区别吗？为什么@import导致<head>里面有多个css呢？不是加了scoped吗

    csscss3vue.js
    阅读 9.2k
    2 个回答
    得票最新
    头像
    kedaya
      1.4k228
      ✓ 已被采纳

      http://www.jianshu.com/p/9caf...
      1、我觉得你应该先理解一下scoped的原理和作用
      2、然后我觉得你就可以查找一下为什么样式乱的原因，我觉得就是应该是vue-loader里tag打没打上的问题，希望得到楼主更加详细的解决结果

      ————————————————————————

      好了我自行测试了一下，果然是tag标签的问题
      你@import导入进来css并没有被打上tag标签，也就是说他是一个全局的css，同样会作用到你别的组件中，也就会使你的样式乱套
      而src引入的会被vue-loader打上tag

      例子：
      @import导入的style编译后的内容

      <style type="text/css">
#test {
  font-size: 100px;
}</style>

      src导入的style编译后的内容

      <style type="text/css">
#test[data-v-3c208292] {
  font-size: 100px;
}</style>
      头像
      HelloWorld
        20212

        vue-cli3.0 亲自测试结果：

        <style lang="scss" scoped   >
@import url("./index.scss")
</style>

        这种引入方式，无效，打包后的css 是错误的

        <style lang="scss" scoped   src="./index.scss">
</style>

        <style lang="scss" scoped   >
@import "./index.scss"
</style>

        后面两种，打包出来，结果是一样的，都加上了 tag

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题