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

#css #sass #vuejs2

Вопрос:

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

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

Это после того, как я уже настроил его. Не помню, была ли опция sass.

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

Недопустимый CSS после «<«: ожидаемый 1 селектор или at-правило, было «»

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

С:

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

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

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

1. Используете ли вы VueCLI v3 для создания проекта? Также вы пытаетесь написать свой CSS внутри тегов стилей в шаблоне или просто ссылаетесь на один файл scss, который включает в себя все?

2. @BryceHowitson Я использовал CLI, поэтому у меня нет файла конфигурации webpack.. существует postcss.config.js однако файл в этом проекте.

3. Да, эта часть сбивает с толку. Если вам нужна конфигурация webpack, вы можете создать (или найти уже созданную) vue.config.js Предполагается, что вся конфигурация webpack будет помещена туда. Используйте VueCLI3 при поиске в Google, чтобы получить лучшие результаты. Когда я переключился на новый VueCLI, этот пост действительно помог мне

Ответ №1:

Только что исправил мою проблему.

Я удалил это:

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

Подумал, что было странно, что import в любом случае будет существовать внутри тега стиля.

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

import './_robotBuilder.scss';

Обновить

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

Ответ №2:

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

 <style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900amp;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 «может» иметь какое-то отношение к тому, чтобы заставить его работать с импортом…