2

我正在尝试使用 Webpack 2 为我的前端框架做一个非常基本的设置。我想捆绑material-components-web和它的 css，但我不知道如何捆绑 CSS。

我希望有一个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但它还没有构建任务，所以这有点像第一步。

4

1 回答 1

2

我认为，您需要样式加载器（https://github.com/webpack-contrib/style-loader），它将在 bundle.js 中包含您的 css

module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: 'style!css',
                exclude: /node_modules/
            }
        ]
    }

于 2017-04-25T21:07:11.150 回答