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.