Создал новый проект с помощью vue-cli, выбрал там опцию добавить препроцессоры, добавил файл vue.config.js, в общем сделал абсолютно все то же самое, что и в предыдущем проекте где все нормально работало. Но в этом проекте какая то загадочная магия происходит, если в компоненте App.vue например написать вот такое:
<style lang="scss">
//
</style>
то из файла main.scss стили применяются, но если убрать тег style или просто удалить из него кавычки, то стили работать не будут
файл vue.config.js выглядит так
const path = require('path');
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
css: {
loaderOptions: {
sass: {
sassOptions: {
includePaths: [
path.resolve(__dirname, 'src')
],
},
prependData: `@import "./src/assets/styles/main.scss";`
},
},
},
assetsDir: '@/assets/',
}
в файле main.scss я импортирую переменные, если в App.js написать
<style lang="scss">
#app {
background-color: $color;
}
</style>
то опять таки стили применяться, а это значит что путь правильный, но почему если убрать тег style или удалить из него все содержимое и оставить пустым, то он игнорирует все стили которые там написаны?
единственная разница между тем проектом и этим состоит только в том, что я обновил node.js и всё. Почему в прошлом проекте после всех проделанных действий я пишу стили в файле main.scss и это работает, то в этом только после каких то странных танцев с бубном и тегом style.