Vue使用@import 引入样式文件全局污染、使用scoped失效问题
scoped在组件中的style使用@import方式引入外部css,发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。<style lang="scss" scoped>@import url("/style/index.scss")<style>上面这种情况即时加入了scoped也无效,样式一样会污染到其他地方。所以改写成src的方式
·
scoped
在组件中的style使用@import方式引入外部css,发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。
<style lang="scss" scoped>
@import url("/style/index.scss")
<style>
上面这种情况即时加入了scoped也无效,样式一样会污染到其他地方。
所以改写成src的方式引入。
<style lang="scss" src="/style/index.scss" scoped>
<style>
<style scoped>
...组件的其他样式
</style>
按道理来说这边是ok的了。但是我写的代码结构是这样子的。
//index.css
@import url('./loElementStyle.scss');
@import url('./loStyle.scss');
@import url('./standard.scss');
然后把这个index.scss引入了组件中去,发现不管使用@import方式还是src引入方式都不起效。后来排查了半天才发现index.scss的引入也有问题。应该要这鸭子:
@import './loElementStyle.scss';
@import './loStyle.scss';
@import './standard.scss';
问题所在:
- @import并不是引入代码到里面,而是发起新的请求获得样式资源。
- 在style里采用src=“外部样式路径”引入到当前组件。
更多推荐
已为社区贡献1条内容
所有评论(0)