Sto costruendo un'applicazione web utilizzando Reagire e Webpack con questa struttura di directoryWebpack Sass URL importazione risolvere
/src
/components
/containers
App.js
App.scss
/assets
/fonts
MarkOT/
MarkOT.css
MarkOT.eot
...
...
/images
/styles
_vars.scss
Sto cercando di importare _vars.scss
da App.scss
in questo modo:
@import '../../styles/vars';
e funziona perfettamente Che cosa non funziona è se ho le importazioni all'interno del _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";
in cui tali importazioni dovrebbe risolvere relativo alla cartella styles
. Invece le importazioni vengono risolte relativamente a containers/App/App.scss
. Ho letto sul sito web sass-loader
che si dovrebbe usare il resolve-url-loader
per risolvere questo problema, ma non riesco a farlo funzionare.
L'importazione di come @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css";
contiene solo una dichiarazione @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;
}
Ecco la mia webpack config:
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')
]
};
Questa linea, in particolare, è per la gestione dei miei stili:
{ 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])) }
Come è stato detto su resolve-url-loader
sito web, ho incluso le mappe di origine nei caricatori sass
e css
(così come i percorsi inclusi nelle librerie bourbon e neat, che vanno benissimo).
C'è qualcosa di palesemente evidente che mi manca che non riesco a vedere?
EDIT:
ero in grado di aggirare il problema creando un file _font.scss
nella stessa directory di _var.scss
, spostando tutti i @font-face
dichiarazioni in _font.scss
e poi sostituendo tutte le istanze di url
con require
all'interno delle dichiarazioni di carattere .
Non mi piace che non sia stato in grado di capire perché l'altro stava funzionando, ma funziona così va bene. Quello che ho trovato interessante è che url
non ha funzionato, ho avuto l'impressione che lo css-loader
si sia preso cura di questo.
piacerebbe anche sentire una soluzione adeguata a questo problema senza dover hackerare i file sorgente. Nel mio caso sto provando a caricare i file '.scss' per Foundation 6. Il file' foundation-sites/scss/foundation.scss' si carica bene, ma le istruzioni @import non vengono incluse. – jpunk11
Le istruzioni '@ import' sono gestite, almeno nel mio caso, da tre cose: 1) Alias risolti nell'oggetto di configurazione del webpack stesso così invece di fare' @import '../../ styles/vars'' I può fare '@import 'stili/vars''. 2) incluso il.scss for foundation come entry point nella configurazione (simile a come font-awesome consiglia di farlo). E 3) nel css-loader, usando il parametro 'importLoaders'. Quello che fa è fondamentalmente dire hey per X (dove x è il valore del parametro), applicare x quantità di caricatori che seguono il caricatore css alle mie istruzioni '@ import'. – barndog
@ jpunk11 Posso pubblicare una soluzione completa se è quello che ti serve. – barndog