I am building a web application using React and Webpack with this directory structure
/src /components /containers App.js App.scss /assets /fonts MarkOT/ MarkOT.css MarkOT.eot ... ... /images /styles _vars.scss
I am trying to import _vars.scss from App.scss as follows:
@import '../../styles/vars';
and it works fine. Which does not work if I have import inside _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";
where these imports should be allowed relative to the styles folder. Instead, import becomes permitted with respect to containers/App/App.scss . I read on the sass-loader website that resolve-url-loader should be used to solve this problem, but I can't get it to work.
Import into @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; just contains the @font-face declaration:
@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; }
Here is my webpack configuration:
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') ] };
This line, in particular, is intended to handle my styles:
{ 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])) }
As he said on the resolve-url-loader website, I included the source maps in both the sass and css loaders (and also included the bourbon paths and neat libraries, all of which load normally).
Is there something obviously obvious that I can’t see, that I don’t see?
EDIT:
I was able to solve the problem by creating the _font.scss file in the same directory as _var.scss , moving all @font-face _font.scss to _font.scss , and then replacing all url instances with require inside font declarations.
I do not like that I could not understand why the other works, but it works so well. Interestingly, the url did not work, I got the impression that css-loader took care of this.