webpack - style - ¿Cómo usar SASS/SCSS con el último proyecto de inicio vue-cli?

vue-cli-plugin-style-resources-loader.

Question

Necesito usar SASS o SCSS en mi proyecto.

Utilicé vue-cli para crear la última versión de un proyecto de inicio.

¿Alguien tuvo éxito en hacer que sass / scss funcione en el nuevo proyecto de inicio con webpack?

Answer 1

1. Instala las dependencias necesarias.

   npm install -D node-sass sass-loader

2. para estilos globales, simplemente importe el archivo a main.js :

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

3. en los archivos .vue , agregue el lang al elemento <style> .

   <style lang="scss">

Si utiliza webstorm:

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

Answer 2

Agregue esto en su package.json en scripts y ejecute

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

Por favor, asegúrese de que node-sass y sass-loader se agreguen correctamente.

Y luego en tu archivo App.vue agrega esto, luego ejecuta

<style lang="scss">
@import ''your compiled css file location'';
</style>

Esto funciona para mi

Gracias