如何使用Webpack 2将库的CSS捆绑到bundle.js中?
问题描述:
我想为我的前端框架使用Webpack 2做一个非常基本的设置。我想捆绑material-components-web和它的CSS,但我无法弄清楚如何捆绑CSS。如何使用Webpack 2将库的CSS捆绑到bundle.js中?
我希望有一个bundle.js
,我可以加载一个HTML文件,并能够呼叫mdc
组件。这里是我的webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'assets/communications/js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'css-loader',
exclude: /node_modules/
}
]
}
};
这是我的入境文件index.js
import * as mdc from 'material-components-web';
的问题是,我失去了我应该如何捆绑CSS一点点。语法可能类似于@import "material-components-web/material-components-web";
但我不知道应该把它放在哪里,是否在index.js
文件中,或者我应该创建一个styles.scss
文件并将其导入index.js
等。我整体丢失了。
此设置的原因是因为我们的代码库使用material-design-lite,jQuery
和Bootstrap
中的组件,但它还没有构建任务,所以这有点像第一步。
答
我想,你需要的风格装载机(https://github.com/webpack-contrib/style-loader),其中将包括在bundle.js
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css',
exclude: /node_modules/
}
]
}
+0
如何导入'material-components-web' sass文件?你能举一个例子吗? –
并导入'mdc'抛出任何错误或这是一个普遍的问题,你的CSS ? –
Nop,但是由于在“入门”部分,他们包括js和css(通过CDN)我想我必须通过webpack导入js和css –