我刚刚得到了我的头放入的WebPack但是现在抛出一个适合当我尝试包括来自index.scss文件引导,萨斯。
该webpack conf很好用,并将.css文件输出到css / stylehseet.css
'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我必须包括自举顶嘴。index.scss,根据https://www.npmjs.com/package/sass-loader#imports,您添加〜,然后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
Webpack非常强大,但是它确实带您走动了房子……这是我的package.json文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "John Carmichael",
"license": "ISC",
"dependencies": {
"bootstrap-sass": "^3.3.6"
},
"devDependencies": {
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "latest",
"node-sass": "^3.11.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
我缺少任何人都可以发现的小东西吗:)?
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.
有你的问题。
编译器正在尝试加载.eot
字体文件,但是它不知道如何处理它,因为您没有使用适当的加载器。
首先,installl的file-loader
和url-loader
在你的开发依赖,就像这样:npm install file-loader url-loader -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'
},
这样,您将能够加载大多数类型的字体
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句