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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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