[英]Webpack Sass import URL resolving
我正在使用具有此目錄結構的React和Webpack構建Web應用程序
/src
/components
/containers
App.js
App.scss
/assets
/fonts
MarkOT/
MarkOT.css
MarkOT.eot
...
...
/images
/styles
_vars.scss
我正試圖從App.scss
導入_vars.scss
, App.scss
所示:
@import '../../styles/vars';
這工作得很好。 如果我在_vars.scss
有導入,那么什么是_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";
這些導入應該相對於styles
文件夾解析。 而是相對於containers/App/App.scss
解析containers/App/App.scss
。 我在sass-loader
的網站上讀到,應該使用resolve-url-loader
來解決這個問題,但是我無法讓它工作。
導入類似@import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css";
只包含一個@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;
}
這是我的webpack配置:
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')
]
};
這一行尤其適合處理我的風格:
{ 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-url-loader
網站上所說,我在sass
和css
加載器中都包含了源映射(以及包含波旁和整齊庫的路徑,所有這些都加載正常)。
有什么明顯的東西我想念我看不到嗎?
編輯:
我能夠通過創建一個要解決這個問題_font.scss
在同一個目錄中的文件_var.scss
,移動所有的@font-face
聲明為_font.scss
,然后替換的所有實例url
與require
的字體聲明里。
我不喜歡我無法弄清楚為什么另一個人正在工作,但它的工作原理很好。 我發現有趣的是url
不起作用,我的印象是css-loader
處理了這個問題。
在你的webpack.config中
resolve: {
modulesDirectories: [ 'src', 'node_modules' ],
alias: {
styles: /*put the base folder of your styles here*/
}
}
然后在樣式表導入中使用@styles然后使用相對路徑
@import '~styles/yourStyle.scss';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.