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]"