我正在使用具有此目录结构的React和Webpack构建Web应用程序
/src
/components
/containers
App.js
App.scss
/assets
/fonts
MarkOT/
MarkOT.css
MarkOT.eot
...
...
/images
/styles
_vars.scss
我正试图从_vars.scss
导入App.scss
,如此:
@import '../../styles/vars';
这很好用。如果我在_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
得到解决。我在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
处理了这个问题。
答案 0 :(得分:6)
resolve: {
modulesDirectories: [ 'src', 'node_modules' ],
alias: {
styles: /*put the base folder of your styles here*/
}
}
然后在样式表导入中使用@styles然后使用相对路径
@import '~styles/yourStyle.scss';