Как использовать SASS/SCSS с последним проектом vue-cli starter?

Мне нужно использовать SASS или SCSS в моем проекте.

Я использовал vue-cli для создания последней версии стартового проекта.

Кто-нибудь имел успех в создании работы sass/scss в самом новом стартовом проекте с webpack?

Ответы

Ответ 1

  • вы устанавливаете необходимые зависимости

    npm install -D node-sass sass-loader

  • для глобальных стилей просто импортируйте файл в main.js:

    import './styles/my-styles.scss'

  • в .vue, добавьте lang в элемент <style>.

    <style lang="scss">

При использовании webstorm:

<style lang="scss" rel="stylesheet/scss">

Ответ 2

Добавьте это в ваш package.json в scripts и запустите

"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w"

Пожалуйста, убедитесь, что node-sass и sass-loader добавлены правильно.

И тогда в вашем файле App.vue добавьте это, затем запустите

<style lang="scss">

    @import 'your compiled css file location';

</style>

Это работает для меня.

Спасибо

Ответ 3

Что касается "Последней документации @vue/cli-service": "^3.9.0", то сначала необходимо установить две зависимости dev от npm, т.е. sass, sass-loader

пререкаться

npm install -D sass-loader sass

yarn add --Dev sass-loader sass

Затем вы можете импортировать файлы соответствующих типов или использовать их в файлах *.vue с:

<style lang="scss">
  $color: red;
</style>

Обратитесь к последней документации здесь