sass - tutorial - Paquete web: no se puede resolver el módulo ''cargador de archivos''
tutorial sass (3)
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
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'']
}
};
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!
Tengo exactamente el mismo problema y lo siguiente lo solucionó:
loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"