问题描述
我在使用 webpack 而不是 Codekit v1.9.3 时遇到问题.我开始从 CodeKit 转向 Grunt 和 Gulp,然后学习了听起来很酷的 webpack
.我似乎无法让它正常工作.
喜欢 Codekit"意味着我可以:
- 使用
coffeescript
语法编写javascript
- 将所有脚本源文件和库压缩/丑化并合并到一个文件中
- 根据需要选择性地包含
bootstrap-sass
(scss) 框架的组件 - 通过 sass 变量(如
$brand-primary
维护一个包含引导程序自定义的小文件 - 使用
webpack --watch
在脚本和样式更改时自动编译它们 - 最终得到一个 css 文件和一个脚本文件,可以包含在样式表和脚本标签中.
Codekit 项目设置
Bower 资源:
我目前在项目之外全局存储这些:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
因为 CodeKit 支持指南针,我的 config.rb
文件中有这个:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
项目结构
js/fancybox.jsjs/main.js <--当前编译的js'输出'文件js/main.coffeecss/styles.css <-- 当前编译后的 css '输出'文件scss/styles.scssscss/modules/_bootstrap-customizations.scssscss/modules/_typography.scssscss/partials/_header.scssscss/partials/_footer.scss
styles.scss 的内容
@import "modules/bootstrap-customizations";# 本地自定义@import "引导程序/变量";@import "bootstrap/mixins";... # 根据需要加载引导文件@import "引导程序/井";
系统设置:
- 系统:OS X 10.9
- 节点 - v0.10.32
- npm - v2.1.7
- zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)
node 是使用 homebrew 的 brew install node
安装的,否则似乎工作正常.
我的尝试
我已经阅读了这些页面:
- http://webpack.github.io/docs/configuration.html
- https://github.com/petehunt/webpack-howto
- http://webpack.github.io/docs/tutorials/getting-started/
- https://www.npmjs.org/package/bootstrap-sass-webpack李>
我曾多次尝试创建 webpack.config.js
文件,我最近的尝试是以下几个版本:
module.exports = {入口: ["./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",./js/main.coffee"],输出: {路径:__dirname,文件名:main.js"},模块: {装载机:[{测试:/.css$/,加载器:style!css"}]}};
Webpack 错误
当我运行 webpack
我得到这个:
./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles 中的错误.loader.js!./bootstrap-sass.config.js标准输入:1:找不到或无法读取要导入的文件:~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM 错误
我在尝试 npm install bootstrap-sass
时遇到错误,并且在寻找解决方案时没有任何运气.我什至不确定我是否需要这个模块.
npm 错误!达尔文 13.4.0npm 错误!argv 节点" /usr/local/bin/npm" 安装" bootstrap-sass"npm 错误!节点 v0.10.32npm 错误!npm v2.1.7npm 错误!代码 EPEERINVALIDnpm 错误!peerinvalid 包 bootstrap-sass 不满足其兄弟姐妹的 peerDependencies 要求!npm 错误!peerinvalid Peer bootstrap-sass-webpack@0.0.3 想要 bootstrap-sass@~3.2.0npm 错误!请在任何支持请求中包含以下文件:npm 错误!/Users/cwd/webpack-test/npm-debug.log
混乱的来源
对我来说,webpack 最令人困惑的部分是:
- 应该在哪里添加
require("bootstrap-sass-webpack")
- 是在webpack.config.js
文件中,还是在js/main.js
文件? - 这样的模块是否应该在使用
npm install
安装后立即可供 webpack 使用? - 我认为我应该这样做
npm install webpack -g
以便全局安装 webpack,并在没有-g
的情况下使用npm install
对于其他模块.但是,我没有看到在我的项目中创建任何node_modules
文件夹.不应该有吗? require("bootstrap-sass-webpack")
之类的搜索路径是如何确定/指定的?
我应该安装哪些节点模块才能做到这一点?我的 webpack.config.js
应该是什么样的?
简介
Webpack 主要是一个 JavaScript 捆绑器.它的原生"语言是 JavaScript,所有其他源都需要一个将其转换为 JavaScript 的加载器.例如,如果您 require()
一个 html 文件...
var template = require("./some-template.html");
...您需要 html-loader.结果……
<img src="./assets/img.png"></div>
...进入...
module.exports = "<div>
<img src="" + require("./assets/img.png") + "">
</div>";
如果加载器不返回 JavaScript,则需要将其传送"到另一个加载器.
如何加载 SASS 文件
配置加载器
要使用 SASS,您至少需要 sass-loader 和css-loader.css-loader 返回一个 JavaScript 字符串.如果您想将返回的 JavaScript 字符串导入为 StyleSheet,您'还需要 style-loader.
运行 npm i sass-loader css-loader style-loader --save
现在您需要将这些加载器应用于所有匹配 /.scss$/
的文件:
//webpack.config.js...模块: {装载机:[//加载器将从右到左应用{测试:/.scss$/,加载器:style!css!sass"}]}...
您还可以将选项作为查询参数传递给 node-sass:
{测试:/.scss$/,加载器:style!css!sass?includePaths[]="+path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"}
由于引导程序通过 url()
语句引用图标,css-loader 将尝试将这些资源包含到包中,否则将抛出异常.这就是为什么您还需要 file-loader:
//webpack.config.js...模块: {装载机:[{测试:/.scss$/,加载器:style!css!sass"},{ 测试:/.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/,加载器:文件"},]}...
配置入口
要将引导程序包含到您的包中,有几种方法.一种是通过您已经尝试过的多条目选项.我建议在 require()
主 sass 文件的位置使用 单个条目:
//main.js要求(./main.scss");
鉴于您的 includePaths
已配置,那么您可以这样做:
//main.scss//设置字体路径,使 url() 指向实际文件$icon-font-path: "../../../fonts/bootstrap";@import "引导程序";
请注意,webpack 不会触及 scss-files 中的 import 语句,因为 libsass 没有 api (然而)提供自定义解析器.
为了防止代码重复,拥有一个单个主 sass 文件也很重要,因为 webpack 会单独编译每个 sass 文件.
通过 npm 安装咖啡加载器后,您的最终 webpack.config.js
应该如下所示:
module.exports = {条目:./js/main.coffee",输出: {路径:__dirname,文件名:main.js"},模块: {装载机:[{测试:/.scss$/,加载器:style!css!sass"},{ 测试:/.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/,加载器:文件"},{测试:/.coffee$/,加载器:咖啡"}]}};
全局 Webpack?
最好不要全局安装 webpack,因为它是你项目的依赖,因此应该通过 npm 控制.您可以使用 package.json 的 scripts 部分
:
{...脚本":{开始":webpack --config path/to/webpack.config.js & node server.js"}}
然后你只需要运行 npm start
I'm having trouble using webpack instead of Codekit v1.9.3. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack
which sounds very cool. I just can't seem to get it working correctly.
"Like Codekit" means I can:
- Write
javascript
with thecoffeescript
syntax - Have all script source files and libraries minified / uglified and combined into one file
- Selectively include components of the
bootstrap-sass
(scss) framework as needed - Maintain a small file with bootstrap customizations via sass variables, like
$brand-primary
- Use
webpack --watch
to compile both scripts and styles automatically when they are changed - End up with one css file and one script file that can be included with a stylesheet and script tag.
Codekit Project Setup
Bower resources:
I'm currently storing these globally, outside of the project:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
Because CodeKit supports compass, I've got this in my config.rb
file:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
Project Structure
js/fancybox.js
js/main.js <-- currently the compiled js 'output' file
js/main.coffee
css/styles.css <-- currently the compiled css 'output' file
scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss
Contents of styles.scss
@import "modules/bootstrap-customizations"; # local customizations
@import "bootstrap/variables";
@import "bootstrap/mixins";
... # load bootstrap files as required
@import "bootstrap/wells";
System Setup:
- system: OS X 10.9
- node - v0.10.32
- npm - v2.1.7
- zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)
node was installed with homebrew's brew install node
and seems to be working fine otherwise.
What I've Tried
I've read over these pages:
- http://webpack.github.io/docs/configuration.html
- https://github.com/petehunt/webpack-howto
- http://webpack.github.io/docs/tutorials/getting-started/
- https://www.npmjs.org/package/bootstrap-sass-webpack
I've attempted to create a webpack.config.js
file several times, my latest attempt was several versions of this:
module.exports = {
entry: [
"./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
"./js/main.coffee"
],
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
Webpack Error
When I run webpack
I get this:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM Error
I get an error when attempting to npm install bootstrap-sass
, and not had any luck when searching for a solution. I'm not even sure I need this module.
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm v2.1.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer bootstrap-sass-webpack@0.0.3 wants bootstrap-sass@~3.2.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/cwd/webpack-test/npm-debug.log
Sources of Confusion
The most confusing parts of webpack for me are:
- Where should things like
require("bootstrap-sass-webpack")
be added - is it in thewebpack.config.js
file, or in thejs/main.js
file? - Should modules like this available to webpack as soon as they are installed with
npm install
? - I thought that I should do
npm install webpack -g
so that webpack was installed globally, and usenpm install
without the-g
for the other modules. However, I don't see anynode_modules
folder being created in my project. Shouldn't there be one? - How are the search paths determined / specified for things like
require("bootstrap-sass-webpack")
?
What node modules should I install to be able to do this? And what should my webpack.config.js
look like?
Introduction
Webpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require()
an html-file for example...
var template = require("./some-template.html");
...you'll need the html-loader. It turns...
<div>
<img src="./assets/img.png">
</div>
...into...
module.exports = "<div>
<img src="" + require("./assets/img.png") + "">
</div>";
If a loader doesn't return JavaScript, it needs to be "piped" to another loader.
How to load SASS-files
Configure loaders
In order to use SASS you'll need at least the sass-loader and the css-loader. The css-loader returns a JavaScript string. If you want to import the returned JavaScript string as StyleSheet, you'll also need the style-loader.
Run npm i sass-loader css-loader style-loader --save
Now you need to apply these loaders on all files that match /.scss$/
:
// webpack.config.js
...
module: {
loaders: [
// the loaders will be applied from right to left
{ test: /.scss$/, loader: "style!css!sass" }
]
}
...
You can also pass options to node-sass as query parameters:
{
test: /.scss$/, loader: "style!css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}
Since bootstrap references icons via the url()
statement, the css-loader will try to include these assets into the bundle and will throw an exception otherwise. That's why you'll also need the file-loader:
// webpack.config.js
...
module: {
loaders: [
{ test: /.scss$/, loader: "style!css!sass" },
{ test: /.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/, loader: "file" },
]
}
...
Configure entry
To include bootstrap into your bundle there are several ways. One is via the multi-entry option as you've already tried. I recommend to use a single entry where you require()
your main sass-file:
// main.js
require("./main.scss");
Given that your includePaths
are configured then you can do:
// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";
@import "bootstrap";
Please note that import statements inside scss-files are not touched by webpack because libsass has no api (yet) to provide custom resolvers.
To prevent code duplication it's also important to have a single main sass-file, because webpack compiles every sass-file individually.
With the coffee-loader installed via npm your final webpack.config.js
should look like:
module.exports = {
entry: "./js/main.coffee",
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /.scss$/, loader: "style!css!sass" },
{ test: /.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/, loader: "file" },
{ test: /.coffee$/, loader: "coffee" }
]
}
};
Webpack globally?
It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. You can use the scripts-section of your package.json
:
{
...
"scripts": {
"start": "webpack --config path/to/webpack.config.js & node server.js"
}
}
Then you just need to run npm start
这篇关于如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!