Cómo importar archivos CSS en el paquete web?

De acuerdo con la documentación , el archivo CSS debería ser import .

Estoy empezando con el webpack e intenté importar un archivo CSS, pero recibí un mensaje sobre la falta de un módulo:

 D:\Dropbox\dev\jekyll\blog>webpack --display-error-details Hash: 0cabc1049cbcbdb8d134 Version: webpack 2.6.1 Time: 74ms Asset Size Chunks Chunk Names build.js 2.84 kB 0 [emitted] main [0] ./webpack/entry.js 47 bytes {0} [built] ERROR in ./webpack/entry.js Module not found: Error: Can't resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack' resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack' Parsed request is a module using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack) Field 'browser' doesn't contain a valid alias configuration after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack) resolve as module D:\Dropbox\dev\jekyll\blog\webpack\node_modules doesn't exist or is not a directory D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory D:\Dropbox\dev\node_modules doesn't exist or is not a directory D:\Dropbox\node_modules doesn't exist or is not a directory D:\node_modules doesn't exist or is not a directory looking for modules in D:\Dropbox\dev\jekyll\blog\node_modules using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules) using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules/navbar.css) as directory D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist no extension Field 'browser' doesn't contain a valid alias configuration D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json doesn't exist [D:\Dropbox\dev\jekyll\blog\webpack\node_modules] [D:\Dropbox\dev\jekyll\node_modules] [D:\Dropbox\dev\node_modules] [D:\Dropbox\node_modules] [D:\node_modules] [D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css] [D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css] [D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js] [D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json] @ ./webpack/entry.js 1:0-21 

webpack se ejecuta contra el siguiente webpack.config.js :

 const path = require('path'); module.exports = { entry: path.join(__dirname, 'webpack/entry.js'), output: { path: path.join(__dirname, 'dist'), filename: 'build.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ], rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] } } 

Inicialmente pensé (antes de usar --display-error-details ) que esto se debía a algunos problemas con la estructura de la ruta (específicamente barras diagonales hacia adelante y hacia atrás) pero luego moví navbar.css a la raíz de la carpeta webpack – mismo problema.

El error detallado muestra que el archivo CSS se busca en nodes_module (que se nodes_module a través de todos los directorios). ¿Por qué? ¿Cómo debo importar un archivo que está en webpack/static/css/myfile.css relativo a la ubicación de webpack.config.js ?

Nota: el mismo problema existe al intentar require lugar de import

Tienes que importarlos como cualquier módulo de JavaScript. Eso significa que, cuando el archivo importado no es una ruta relativa (comenzando con ../ o ./ ), ni una ruta absoluta (comenzando con / ), se resuelve como un módulo. Por defecto, el paquete web buscará módulos en el directorio node_modules (en el directorio actual y en todos los directorios principales). Este es el mismo comportamiento que utiliza Node.js.

Para importar webpack/static/css/myfile.css en webpack/entry.js , debe usar una ruta relativa.

 import './static/css/myfile.css'; 

Si no desea utilizar una ruta relativa, puede cambiar los directorios que utiliza el paquete web para encontrar un módulo con el resolve.modules o puede usar resolve.alias .


En su configuración de paquete web también definió module.rules y module.loaders . Cuando webpack ve module.rules , ignora module.loaders completo, por lo que su babel-loader no se usará. Solo debe usar module.rules .

 module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }