Блог

Кто-нибудь знает, как импортировать файл CSS с ограниченной областью в Vue 3?

Я попытался включить код в тег script (см. Ниже), но он просто включает CSS глобально. Затем я попытался добавить его в атрибут src для тега style, который работает, но он игнорирует стили в теге style (также показано ниже).

Тег скрипта включает

 <script>
import '@/assets/sass/styles.sass'
export default {   
...
  

Тег стиля включает

 <style lang="sass" src="@/assets/sass/styles.sass" scoped>
/* wrapper style ignored if I include src */
#wrapper   
...
  

Хорошо, я смог разобраться с этим сразу после публикации вопроса. Для всех, у кого еще есть эта проблема, вы можете просто вызвать import в своем теге style, и он сохранит статус scoped. Пример ниже…

 <style lang="sass" scoped>
import '@/assets/sass/styles.sass'
/* wrapper is now recognized */
#wrapper   
...
  

вы пытаетесь использовать css

 <style lang="css" scoped src="../../../public/css/company/style.css"></style>