Webpack 带引导的网页包sass加载程序
我刚刚进入了webpack,但现在当我试图从index.scss文件中包含引导sass时,它突然发作了 此webpack conf工作正常,并将.css文件输出到css/stylehseet.cssWebpack 带引导的网页包sass加载程序,webpack,bootstrap-sass,sass-loader,Webpack,Bootstrap Sass,Sass Loader,我刚刚进入了webpack,但现在当我试图从index.scss文件中包含引导sass时,它突然发作了 此webpack conf工作正常,并将.css文件输出到css/stylehseet.css 'use strict'; var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { st
'use strict';
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
stylesheet: path.resolve(__dirname, 'scss/index.scss')
},
output: {
path: path.resolve(__dirname),
filename: 'bundle.bootstrap-sass.js'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', // backup loader when not building .css file
'css!sass' // loaders to preprocess CSS
)
}
]
},
plugins: [
new ExtractTextPlugin('css/[name].css')
],
resolve: {
modulesDirectories: [
'./node_modules'
]
}
};
问题是,在index.scss中,我必须包含引导sass。
index.scss,根据您添加的~和webpack应解决所有问题:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
问题在于我的尝试,而不是:/。我得到输出:
Hash: b59b46e5946e7ab3d888
Version: webpack 1.13.3
Time: 1852ms
Asset Size Chunks Chunk Names
bundle.bootstrap-sass.js 171 kB 0 [emitted] css
+ 9 hidden modules
ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
at Parser.pp$4.raise (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:515:10)
at Object.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
@ ./~/css-loader!./~/sass-loader!./scss/index.scss 6:4172-4253 6:4276-4357
ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
..... etc etc
有没有我遗漏的一些小东西,任何人都能发现:)
这是你的问题
compliler正在尝试加载.eot
字体文件,但它不知道如何处理它,因为您没有使用合适的加载程序
首先,在您的开发依赖项中安装文件加载器
和url加载器
,如下所示:npm安装文件加载器url加载器-D
然后,将这些添加到加载程序中
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
通过这种方式,您将能够加载大多数类型的字体Ah-ha!非常感谢。你的回答加上你的回答帮助我弄清了这件事的真相。仍然不能100%确定我是否得到了这个网页资料;)还有,还有其他人在读这篇文章吗。。不要忘记将url加载器和文件加载器添加到包中json@John哦,你是对的,我以为你有。我会加上完整的答案。约翰,这对我来说也是工作。迪米特里斯·卡拉吉安尼斯的回答出乎意料地通过了角色的回答�' (1:0),但我得到的另一个错误是*.ttf意外字符“”(1:0)@HuyNguyen您能将错误行从“error in…”粘贴到“…(1:0)”吗?
ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},