name - webpack resolve css

Resolución de URL de importación de Webpack Sass

Question

Estoy construyendo una aplicación web usando React y Webpack con esta estructura de directorios

/src
    /components
    /containers
        App.js
        App.scss
    /assets
        /fonts
            MarkOT/
                MarkOT.css
                MarkOT.eot
                ...
            ...
        /images
    /styles
        _vars.scss

Estoy tratando de importar _vars.scss desde App.scss así:

@import ''../../styles/vars'';

y eso funciona bien Lo que no funciona es si tengo importaciones dentro de _vars.scss

@import "../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css";
@import "../assets/fonts/MarkOT-Light/MarkOT-Light.css";
@import "../assets/fonts/MarkOT/MarkOT.css";
@import "../assets/fonts/MarkOT-Medium/MarkOT-Medium.css";
@import "../assets/fonts/MarkOT-Book/MarkOT-Book.css";

donde esas importaciones deberían resolverse en relación con la carpeta de styles . En cambio, las importaciones se están resolviendo en relación con los containers/App/App.scss . Leí en el sitio web de sass-loader que uno debería usar resolve-url-loader para resolver este problema, pero no puedo hacerlo funcionar.

Una importación para como @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; solo contiene una declaración @font-face :

@font-face {
  font-family: ''MarkOT'';
  src: url(''MarkOT.eot?#iefix'') format(''embedded-opentype''),  url(''MarkOT.otf'')  format(''opentype''),
     url(''MarkOT.woff'') format(''woff''), url(''MarkOT.ttf'')  format(''truetype''), url(''MarkOT.svg#MarkOT'') format(''svg'');
  font-weight: normal;
  font-style: normal;
}

Aquí está mi configuración de paquete web:

var webpack = require(''webpack'');
var path = require(''path'');
var ExtractTextPlugin = require(''extract-text-webpack-plugin'');

module.exports = {
  devtool: ''source-map'',
  context: path.resolve(__dirname, ''..''),
  entry: {
      app: path.resolve(__dirname, ''../src/client/index.js''),
      vendors: [''react'', ''react-dom'', ''react-router'']
  },
  output: {
    path: path.resolve(__dirname, ''../dist''),
    pathInfo: true,
    filename: ''bundle.js'',
    css: ''main.css''
  },
  module: {
     preLoaders: [
        {
         test: //.js?$/,
         loader: "eslint-loader",
         exclude: /node_modules/
        }
    ],
     loaders: [
      {
        test: /src//.+.js$/,
        exclude: /node_modules/,
        loader: ''babel'',
        query: {
          presets: [''react'', ''es2015'', ''stage-0'']
        }
      },
      { test: //.jpe?g$|/.gif$|/.png$|/.svg$|/.woff$|/.ttf$/, loader: "file-loader" },
      { test: //.scss?$/, loader: ExtractTextPlugin.extract(''style'', ''!css?sourceMap!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]='' + encodeURIComponent(require(''node-bourbon'').includePaths) +
    ''&includePaths[]='' + encodeURIComponent(require(''node-neat'').includePaths[1])) }
    ]
  },
  resolve: {
    modulesDirectories: [
      ''src'',
      ''node_modules''
    ]
   },
   plugins: [
     new webpack.optimize.CommonsChunkPlugin(''vendors'', ''vendors.js''),
     new ExtractTextPlugin(''main.css'')
  ]
 };

Esta línea en particular es para manejar mis estilos:

{ test: //.scss?$/, loader: ExtractTextPlugin.extract(''style'', ''!css?sourceMap!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]='' + encodeURIComponent(require(''node-bourbon'').includePaths) +
    ''&includePaths[]='' + encodeURIComponent(require(''node-neat'').includePaths[1])) }

Como decía en el sitio web resolve-url-loader , incluí mapas de origen en los cargadores sass y css (así como las rutas incluidas a las bibliotecas bourbon y ordenadas, todo lo cual carga bien).

¿Hay algo descaradamente obvio que me estoy perdiendo que no puedo ver?

EDITAR:

Pude solucionar el problema creando un archivo _font.scss en el mismo directorio que _var.scss , moviendo todas las declaraciones @font-face a _font.scss y luego reemplazando todas las instancias de url con require dentro de las declaraciones de fuentes.

No me gusta que no haya podido descubrir por qué el otro estaba funcionando pero funciona, así que está bien. Lo que me pareció interesante es que la url no funcionó, tenía la impresión de que css-loader se encargó de eso.

Answer 1

en su webpack.config

  resolve: {
    modulesDirectories: [ ''src'', ''node_modules'' ],
    alias: {
      styles: /*put the base folder of your styles here*/
    }
  }

y luego en su hoja de estilo de importación usando un @styles luego la ruta relativa

@import ''~styles/yourStyle.scss'';