0

У меня есть несколько scss файлов, с миксинами и прочими настройками для проекта. Мне нужно подключить их к стартовому шаблону vue cli. Как это можно сделать? Мне необходимо, что бы эти миксины и стартовые настройки вроде font-face распространялись на все веб приложение. Для сборки использую webpack.

0

1 ответ 1

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>

Источник и сам пользовался не раз этим методом.

3
  • 1
    Для того, чтобы импортировать .scss файл нужно будет прописать “@import”, например: <style lang="scss" scoped> @import '../assets/scss/main'; </style> Было достаточно этого. Благодарю.
    – Nulliza
    14 мая 2019 в 15:22
  • Написал все полностью, мало ли на каком шаге застярял :)
    – Pavel8289
    14 мая 2019 в 15:23
  • 1
    А еще возникла проблема, туториал отличный. Вот только у меня нет папки build c webpack.base.conf.js И теперь не совсем понятно как ее создавать.
    – Nulliza
    14 мая 2019 в 16:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.