Как добавить глобальный файл scss в Vue.JS, который будет компилироваться?

Question

Я пытаюсь импортировать файл scss в мой проект VueJS, где он затем скомпилируется и, таким образом, сможет использоваться с моим проектом. Однако мне нужна помощь, так как в настоящее время это просто ошибки. Есть ли способ сделать это? Пожалуйста, обратите внимание, я очень новичок в VueJS, поэтому я просто разбираюсь с основами.

Я создал папку с именем scss в моей папке src, которая содержит мой файл main.scss. Далее в моем Vue.JS у меня есть следующий код;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

Answer 1

Это зависит от того, что вы использовали для создания проекта Vue, но когда вы используете инструмент Vue CLI 3, вы можете настроить его в файле vue.config.js, расположенном в корневом каталоге. Этот файл предназначен для конфигурации вашего проекта Vue и часто используется для перезаписи конфигурации вашего веб-пакета (его там нет, если вы не удалите его).

npm install -D sass-loader node-sass

После этого вы можете добавить это в vue.config.js файл

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "./src/main.scss";
                `,
            },
        },
    },
}

И затем вы можете импортировать все ваши файлы scss в main.scss. Таким образом, вы также можете использовать переменные в ваших компонентах. Лично я не рекомендовал бы иметь отдельные таблицы стилей. Если ваш проект масштабируется, вы, вероятно, удалите компоненты, а затем получите стили, которые больше не используете. Если вы напишите свой scss в самих компонентах, вы также удалите стили при удалении вашего компонента. Я хотел бы пойти только для некоторых глобальных стилей в отдельном файле и файл для ваших переменных. Надеюсь, это поможет.

Answer 2

Есть несколько вариантов решения этой ситуации.

1. импортировать ваш глобальный CSS в index.html.
2. импортировать файл CSS в текущий компонент.
3. предположим, что вы используете серверный рендеринг с nuxt , тогда вы можете поместить свой CSS в файл nuxt.config.js.
4. Вы можете использовать Webpack

Answer 3

Я обновил тег стиля, добавив оператор импорта, и он работает.

@import 'scss/main.scss';

#app {
    display:block;
}
</style>