[英]Webpack Sass import URL resolving
I'm building a web application using React and Webpack with this directory structure 我正在使用具有此目录结构的React和Webpack构建Web应用程序
/src
/components
/containers
App.js
App.scss
/assets
/fonts
MarkOT/
MarkOT.css
MarkOT.eot
...
...
/images
/styles
_vars.scss
I'm trying to import _vars.scss
from App.scss
like so: 我正试图从
App.scss
导入_vars.scss
, App.scss
所示:
@import '../../styles/vars';
and that works just fine. 这工作得很好。 What doesn't work is if I have imports inside of
_vars.scss
如果我在
_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";
where those imports should resolve relative to the styles
folder. 这些导入应该相对于
styles
文件夹解析。 Instead the imports are getting resolved relative to containers/App/App.scss
. 而是相对于
containers/App/App.scss
解析containers/App/App.scss
。 I read on sass-loader
s website that one should use the resolve-url-loader
to solve this issue but I can't get it to work. 我在
sass-loader
的网站上读到,应该使用resolve-url-loader
来解决这个问题,但是我无法让它工作。
An import to like @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css";
导入类似
@import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css";
just contains a @font-face
declaration: 只包含一个
@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;
}
Here's my webpack config: 这是我的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')
]
};
This line in particular is for handling 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 it said on the resolve-url-loader
website, I included source maps in both the sass
and css
loaders (as well as included paths to the bourbon and neat libraries, all of which loads fine). 正如它在
resolve-url-loader
网站上所说,我在sass
和css
加载器中都包含了源映射(以及包含波旁和整齐库的路径,所有这些都加载正常)。
Is there something blatantly obvious I'm missing that I can't see? 有什么明显的东西我想念我看不到吗?
EDIT: 编辑:
I was able to workaround the issue by creating a _font.scss
file in the same directory as _var.scss
, moving all the @font-face
declarations into _font.scss
and then replacing all the instances of url
with require
inside the font declarations. 我能够通过创建一个要解决这个问题
_font.scss
在同一个目录中的文件_var.scss
,移动所有的@font-face
声明为_font.scss
,然后替换的所有实例url
与require
的字体声明里。
I don't love that I wasn't able to figure out why the other one was working but it works so that's good. 我不喜欢我无法弄清楚为什么另一个人正在工作,但它的工作原理很好。 What I found interesting is that
url
didn't work, I was under the impression that css-loader
took care of that. 我发现有趣的是
url
不起作用,我的印象是css-loader
处理了这个问题。
in your webpack.config 在你的webpack.config中
resolve: {
modulesDirectories: [ 'src', 'node_modules' ],
alias: {
styles: /*put the base folder of your styles here*/
}
}
and then in your stylesheet import using a @styles then the relative path 然后在样式表导入中使用@styles然后使用相对路径
@import '~styles/yourStyle.scss';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.