example - ¿Por qué no puedo compilar SASS con Webpack?

webpack sass to css

Question

Tengo los siguientes módulos en mi configuración de Webpack:

module: {
    preLoaders: [
      {
        test: //.vue$/,
        loader: ''eslint'',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: //.js$/,
        loader: ''eslint'',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: //.vue$/,
        loader: ''vue''
      },
      {
        test: //.js$/,
        loader: ''babel'',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: //.json$/,
        loader: ''json''
      },
      {
        test: //.html$/,
        loader: ''vue-html''
      },
      {
        test: //.(png|jpe?g|gif|svg)(/?.*)?$/,
        loader: ''url'',
        query: {
          limit: 10000,
          name: utils.assetsPath(''img/[name].[hash:7].[ext]'')
        }
      },
      {
        test: //.scss$/,
        loaders: [''style'', ''css'', ''sass'']
      },
      {
        test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,
        loader: ''url'',
        query: {
          limit: 10000,
          name: utils.assetsPath(''fonts/[name].[hash:7].[ext]'')
        }
      }
    ]
  },

Puede ver que estoy usando sass-loader y para los archivos * .scss estoy definiendo este canal: [''style'', ''css'', ''sass''] .

Luego tengo mi archivo scss:

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

Finalmente tengo mi página HTML (en un archivo VUE de vue.js) que importa ese archivo scss:

<script>

require(''./styles/main.scss'')

(...)

</script>

Pero de alguna manera me sale este error al lanzar el proyecto:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

¿Por qué está mal la tubería? (Parece que el paquete web está intentando procesar [''css'', ''sass'', ''style'', ''css'', ''sass''] lugar de solo [''style'', ''css'', ''sass''] tal como está configurado en los módulos.

¿Qué estoy haciendo mal?

¡Gracias!

EDITAR: enlace al proyecto de ejemplo completo: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

Answer 1

La razón por la que esto sucede es porque Vue genera automáticamente las configuraciones del cargador para CSS, SASS / SCSS, Stylus.

(Consulte las projectRoot/build/utils.js ~ 10 a ~ 50)

Entonces, está viendo el error porque tiene un cargador de paquetes web que está intentando importar el archivo y luego Vue está intentando importar el archivo (ya cargado). Así que puedes pensar en tu cadena de cargadores como sass -> css -> style -> sass -> css -> vue-style

Para resolver este problema, debe deshacerse del cargador que agregó:

{
  test: //.scss$/,
  loaders: [''style'', ''css'', ''sass'']
},

y solo confíe en el cargador provisto.

Puedes cargar tu hoja de estilo de una de estas dos maneras:

NOTA: DEBE usar scss lugar de sass , ya que sass intentará analizar su hoja de estilos usando la sintaxis con sangría en lugar de la sintaxis del corchete.

1:

<style lang="scss">
  @import ''./styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

Ambos importarán la hoja de estilo, esta última simplemente evita que agregues cualquier estilo adicional al componente.