sass - tutorial - Paquete web: no se puede resolver el módulo ''cargador de archivos''

tutorial sass

Question

Cuando trato de construir un archivo SASS con webpack, recibí el siguiente error:

Módulo no encontrado: Error: No se puede resolver el módulo ''cargador de archivos''

tenga en cuenta que este problema solo ocurre cuando intento cargar una imagen de fondo con una ruta relativa.

esta obra bien:

 background:url(http://localhost:8080/images/magnifier.png);

esto causa el problema:

 background:url(../images/magnifier.png);

y esta es mi estructura de proyecto

• imagenes
• estilos
• webpack.config.js

y este es mi archivo webpack:

var path = require(''path'');
module.exports = {
entry: {
build: [
''./scripts/app.jsx'',
''webpack-dev-server/client?http://localhost:8080'',
''webpack/hot/only-dev-server''
]
},
output: {
path: path.join(__dirname, ''public''),
publicPath: ''http://localhost:8080/'',
filename: ''public/[name].js''
},
module: {
loaders: [
{test: //.jsx?$/, loaders: [''react-hot'', ''babel?stage=0''], exclude: /node_modules/},
{test: //.scss$/, loaders: [''style'', ''css'', ''sass'']},
{test: //.(png|jpg)$/, loader: ''file-loader''},
{test: //.(ttf|eot|svg|woff(2)?)(/?[a-z0-9]+)?$/, loader: ''file-loader''}
]
},
resolve: {
extensions: ['''', ''.js'', ''.jsx'', ''.scss'', ''.eot'', ''.ttf'', ''.svg'', ''.woff''],
modulesDirectories: [''node_modules'', ''scripts'', ''images'', ''fonts'']
}
};

Answer 1

Como dijo @silvenon en su comentario:

¿Tienes el cargador de archivos instalado?

Sí , el cargador de archivos se instaló pero se rompió, y mi problema se resolvió reinstalándolo.

npm install --save-dev file-loader

Answer 2

Gracias por esto: esta fue la última pieza para obtener Bootstrap, d3js, Jquery, imágenes en línea base64 y mi propia JS mal escrita para jugar con el paquete web.

Para responder a la pregunta anterior y la solución para sortear la problemática.
Módulo no encontrado: Error: No se puede resolver el módulo ''url'' Cuando se compilaban las fuentes bootstrap

{
test: /glyphicons-halflings-regular/.(woff2|woff|svg|ttf|eot)$/,
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]"
}

¡Gracias!

Answer 3

Tengo exactamente el mismo problema y lo siguiente lo solucionó:

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"