javascript - manera - cargar el contenido visible antes de los archivos css y js

Error: no se puede resolver el módulo ''style-loader''

Question

Estoy usando style-loader con webpack y react framework. Cuando ejecuto webpack en la terminal obtengo Module not found: Error: Cannot resolve module ''style-loader'' en el archivo import.js aunque he especificado la ruta del archivo correctamente.

import ''../css/style.css'';
import React from ''react'';
import ReactDOM from ''react-dom'';
import jQuery from ''jquery'';
import TopicsList from ''../components/topic-list.jsx'';
import Layout from ''../components/layout.jsx'';

webpack.config.js:

var webpack = require(''webpack'');
var path = require(''path'');

var BUILD_DIR = path.resolve(__dirname, ''build'');
var APP_DIR = path.resolve(__dirname, ''build'');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      ''babel-polyfill'',

      // Add your application''s scripts below
      APP_DIR + ''/import.js''
    ],
    output: {
        path: BUILD_DIR,
        filename: ''bundle.js''
    },
    module: {
        loaders: [
            {
                test: //.jsx?$/,
                loader: ''babel'',

                exclude: /node_modules/,
                query: {
                    plugins: [''transform-runtime''],
                    presets: [''es2015'', ''stage-0'', ''react'']
                }
            },
            { test: //.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['''', ''.js'', ''.jsx'', ''.css'']
        }
    }
};

Answer 1

En Webpack 3, con node_module en una ubicación no estándar, tuve que usar los objetos de configuración resolve y resolveLoader :

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},

Answer 2

Intente ejecutar el script a continuación:

npm install style-loader --save

Modifique la configuración del paquete web, agregue el campo modulesDirectories en resolve .

    resolve: {
        extensions: ['''', ''.js'', ''.jsx'', ''.css''],
        modulesDirectories: [
          ''node_modules''
        ]        
    }

Answer 3

Por favor ejecute este script:

 npm install style-loader css-loader --save

Configure su módulo de la siguiente manera:

module: {
  loaders: [
    {
      test: //.jsx?$/,
      loader: ''babel-loader'',
      include: path.join(_dirname, ''app'')
    },
    {
      test: //.css$/,
      loader: ''style-loader!css-loader''
    }
  ],
  resolve: {
      extensions: ['''', ''.js'', ''.jsx'', ''.css'']
  }
}

Básicamente se trata de leer en lo que respecta a los cargadores: pruebe jsx con babel-loader y la próxima prueba es un archivo css con style-loader y css-loader, que reconocerá los módulos. Además, debe salir de npm start y ejecutar "npm install" y ejecutar "npm start". Con suerte, esto debería solucionar el problema.

Answer 4

Quería agregar a lo que dijo . En las versiones más recientes de Webpack (V2 +) moduleDirectories ha sido reemplazado por modules . La parte de resolve actualizada de su respuesta se vería así:

resolve: {
    extensions: [''.js'', ''.jsx'', ''.css''], //An empty string is no longer required.
    modules: [
      ''node_modules''
    ]        
}

Para obtener más información, puede consultar su documentación oficial . Espero que esto ayude a alguien por ahí.

Answer 5

Si intenta importar un archivo CSS con esta línea:

import ''../css/style.css'';

y he agregado el style-loader en la configuración de su paquete web.

El error dice:

Módulo no encontrado: Error: No se puede resolver el módulo ''style-loader''

el módulo llamado "cargador de estilo" no está resuelto.

Necesita instalar ese módulo con:

$ npm install style-loader --save

O, si estás usando hilo:

$ yarn add style-loader

Luego ejecute webpack nuevamente.

Answer 6

Si sus node_modules están en el mismo directorio que el archivo de configuración de su paquete web, simplemente puede agregar context: __dirname .

module.exports = {
    context: __dirname,
    entry: [
    ...

(funciona tanto en el paquete web 1 como en el 2 )

Answer 7

Uso Windows e hice todo pero nada funcionó. Al parecer, la consola no tenía suficientes permisos. Entonces, después de ejecutar en modo Administrador, volví a ingresar

npm install

Y todo funcionó. Puede ver el resultado apareciendo muchos módulos en el directorio node_modules.