Tengo los siguientes módulos en mi Webpack config:

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]')
        }
      }
    ]
  },

Se puede ver que estoy usando sass-loader, y para *.secs archivos yo soy la definición de este oleoducto: ['style', 'css', 'sass'].

Entonces tengo mi secs archivo:

html {
  height: 100%;
}

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

(...)

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

<script>

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

(...)

</script>

Pero de alguna manera me sale este error al iniciar 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é es conseguir la tubería mal? (Aparece webpack está tratando de proceso ['css', 'sass', 'style', 'css', 'sass'] en lugar de sólo ['style', 'css', 'sass'] como se ha configurado en los módulos.

¿Qué estoy haciendo mal?

Gracias!

EDICIÓN: Enlace a la totalidad del proyecto de ejemplo: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

  • require('./styles/main.scss') si acaso no venga dentro de <script> etiqueta. por el contrario, debe estar dentro de <style lang="sass"></style> sass importación de sintaxis.
  • Me compila ahora sin mostrar errores. Sin embargo, el CSS no se representa en la página resultante (es decir, no llegar incluido en el html).
  • He añadido un enlace a la totalidad del proyecto.
InformationsquelleAutor PedroD | 2016-05-04

1 Comentario

  1. 32

    La razón por la que esto está sucediendo, es porque Vue genera automáticamente el gestor de configuraciones para CSS, SASS/SECS, con el Lápiz.

    (Ver projectRoot/build/utils.js líneas de ~10 a ~50)

    Lo estás viendo el error, porque usted tiene una webpack cargador que está intentando importar el archivo y, a continuación, Vue es intentar importar el (ya cargado) archivo. Así que usted puede pensar en su cargador de cadena como sass -> css -> style -> sass -> css -> vue-style

    Con el fin de resolver este problema, usted tiene que deshacerse de el cargador que agregó:

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

    y sólo se basan en el cargador.

    Usted puede cargar su hoja de estilos en una de dos maneras:

    NOTA: DEBE uso scss en lugar de sass, como sass intentará analizar su hoja de estilos utilizando la sangría de sintaxis en lugar de la sintaxis de corchetes.

    1:

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

    2:

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

    Ambos importar la hoja de estilos, en el segundo, solo le impide añadir estilo a los componentes.

    • Rápida adición del último párrafo: Se pueden utilizar varios <style> etiquetas en una .vue componente, así que mientras que usted puede añadir ninguna de reglas CSS a la etiqueta con el src atributo, puede agregar una segunda etiqueta y los puso allí.
    • Guardar mi día!
    • Lo que si quiero importar secs archivo en el archivo JS?

Dejar respuesta

Please enter your comment!
Please enter your name here