我刚刚开始研究 webpack,但是当我尝试从 index.scss 文件中包含 bootstrap-sass 时,它现在已经很合适了。
这个 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 中我必须包含 bootstrap-sass。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"
}
}
有什么我想念的小东西,任何人都可以发现:)?