У меня есть несколько scss файлов, с миксинами и прочими настройками для проекта. Мне нужно подключить их к стартовому шаблону vue cli. Как это можно сделать? Мне необходимо, что бы эти миксины и стартовые настройки вроде font-face распространялись на все веб приложение. Для сборки использую webpack.
1 ответ
Первое, что нам нужно будет сделать, так это установить некоторые зависимости, выполняем команду: Если используете NPM :
npm install sass-loader node-sass style-loader --save-dev
Eсли используете yarn:
yarn add sass-loader node-sass style-loader
Следующее, нужно добавить настройки приведенные ниже в Webpack, сами строки находятся в “build/webpack.base.conf.js” файле.
Важно! Отмечу то, что наши SCSS файлы находятся в “src/assets/scss”.
resolve: {
extensions: ['.js', '.vue', '.json', '.scss'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
styles: resolve('src/assets/scss')
}
}
Теперь можно использовать SCSS в своих проектах, для этого нужно добавить не хитрую опцию lang = “scss” в секцию со стилями, вот так:
<style lang="scss" scoped>
</style>
Для того, чтобы импортировать .scss файл нужно будет прописать “@import”, например:
<style lang="scss" scoped>
@import '../assets/scss/main';
</style>
Источник и сам пользовался не раз этим методом.
-
1Для того, чтобы импортировать .scss файл нужно будет прописать “@import”, например: <style lang="scss" scoped> @import '../assets/scss/main'; </style> Было достаточно этого. Благодарю.– Nulliza14 мая 2019 в 15:22
-
-
1А еще возникла проблема, туториал отличный. Вот только у меня нет папки build c webpack.base.conf.js И теперь не совсем понятно как ее создавать.– Nulliza14 мая 2019 в 16:18