Как настроить SASS в проекте VueJS (vue-cli, без конфигурации webpack)

Question

Мой репо: https://github.com/leongaban/VueJS-RobotBuilder

Курс, которому я следую: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper

Это после того, как я уже настроил это. Не помню, был ли вариант нахальный.

В любом случае в настоящее время работает с этой ошибкой:

Недопустимый CSS после "<": ожидался 1 селектор или правило, было "" </p>

Я заменил свой старый <style> CSS stuff here </style>

С:

<style lang="scss">
  @import "_robotBuilder.scss";
</style>

Я также установил следующие пакеты, но не вижу файл конфигурации веб-пакета, который можно редактировать.

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

Answer 1

Просто исправил мою проблему.

Я удалил это:

<style lang="scss">
  @import "_robotBuilder.scss";
</style>

Думал, что это странно, что в любом случае внутри тега стиля будет import.

Затем я очистил файл .scss, а затем просто использовал этот оператор импорта внутри раздела <script>.

import './_robotBuilder.scss';

Обновление

Только что узнал, что вы можете охватитьтег <style scoped>, поэтому стили применяются только к компоненту.

Answer 2

Мой app.vue (основной контейнер) содержит только это в тегах стиля

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/style.scss";
</style>

и работает просто отлично.

И это в vue.config.js

const path = require("path");
module.exports = {

    baseUrl: '/',
    outputDir: undefined,
    assetsDir: 'assets',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: true,
    css: {
        modules: false,
        loaderOptions: {}
    }

}

Отключение модуляции CSS "может" как-то связано с тем, чтобы она работала с импортом ...