[英]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.