Question

我正在尝试将所有我的sass文件编译成单个style.css文件，如Here所述。我安装了npm install --save-dev extract-text-webpack-plugin并在我的webpack.config.dev.js下面。

const path = require('path');
const webpack = require('webpack');
const WebpackNotifierPlugin = require('webpack-notifier');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'eval',
    entry: [
        './src',
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new WebpackNotifierPlugin({ title: 'My Project Build' }),
        new ExtractTextPlugin('public/style.css', {
            allChunks: true,
        }),
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.join(__dirname, 'src'),
        }, {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass'),
                include: path.join(__dirname, 'public/sass'),
        }, {
            test: /\.js$/,
            loader: 'eslint-loader',
            include: path.join(__dirname, 'src'),
        }],
    },
};

在我的公共文件夹中，我添加了另一个文件夹sass和一个body.scss文件，以供下面的测试。

.first-component {
    .text { font-size: 1.4rem; }
    .button { font-size: 1.7rem; }
}

当我运行节点server.js时，我期待我的body.scss写在我的空style.css中。我的server.js在下面。

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.dev');

const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
}));

app.use(require('webpack-hot-middleware')(compiler));

app.use('/', express.static('public'));

app.get('*', (req, res) =>
    res.sendFile(path.join(__dirname, 'public/index.html'))
);


app.listen(3030, 'localhost', err => {
    if (err) {
        console.log(err);
        return;
    }

    console.log('Listening at http://localhost:3030');
});

我的webpack在节点server.js上执行。但是，我的style.css文件仍然是空的。我尝试一切都无济于事。请问我缺少什么，我该如何解决这个问题？

使用webpack将.scss解压缩到css

0 个答案: