web-dev-qa-db-fra.com

Comment utiliser SASS / SCSS avec le dernier projet de démarrage de vue-cli?

Je dois utiliser SASS ou SCSS dans mon projet.

J'ai utilisé la vue-cli pour créer la dernière version d'un projet de démarrage.

Quelqu'un a-t-il réussi à faire fonctionner sass/scss dans le dernier projet de démarrage avec webpack?

webpacksassvue.jsvuejs2vue-component
24
CommonSenseCode

  1. vous installez les dépendances nécessaires

    npm install -D node-sass sass-loader

  2. pour les styles globaux, importez simplement le fichier dans main.js:

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

  3. dans .vue fichiers, ajoutez le lang au fichier <style> élément.

    <style lang="scss">

Si vous utilisez webstorm:

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

52
Linus Borg

Comme dernière documentation de @vue/cli-service": "^3.9.0", il faut d’abord installer deux dépendances npm dev, à savoir sass, sass-loader

Sass

npm install -D sass-loader sass

yarn add --dev sass-loader sass

Ensuite, vous pouvez importer les types de fichiers correspondants ou les utiliser dans des fichiers * .vue avec:

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

Reportez-vous à dernière documentation ici

0
Prafull Sharma

Ajoutez ceci dans votre package.json dans scripts et exécuter

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

Veuillez vous assurer que node-sass et sass-loader sont ajoutés correctement.

Et ensuite, dans votre fichier App.vue, ajoutez ceci, puis exécutez

<style lang="scss">

    @import 'your compiled css file location';

</style>

Cela fonctionne pour moi.

Merci

0
emon