CSS文件不要使用webpack创建 [英] CSS file don't not create with webpack

问题描述

我使用webpack，我想生成我的CSS文件与SASS。

I use webpack and i would like generate my CSS file with SASS.

所以我添加了css-loader和sass-loader。但是，webpack不创建我的CSS文件夹。我的webpackconfig：

So i've add css-loader and sass-loader. But, webpack don't create my CSS folder. My webpackconfig :

const webpack = require('webpack'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './js/app.js',
    output: {
        path: './public',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loaders: ExtractTextPlugin.extract(["style", "css", "sass"])
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css'),
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                server: { baseDir: ['./'] }
            }
        )
    ]
}

你有什么想法吗？

谢谢！

推荐答案

您可以使用style！css！sass loader。只需使用npm安装它们，并在您的webpack.config中设置下面的配置。

You could use the style!css!sass loaders. Just install them using npm and set the config below in your webpack.config.

{
   test: /\.scss$/,
   loader: 'style!css!sass?sourceMap'
}

$ b b

您的最终webpack.config应该如下所示：

Your final webpack.config should look like this:

const webpack = require('webpack'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './js/app.js',
    output: {
        path: './js',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
              test: /\.scss$/,
              loader: 'style!css!sass?sourceMap'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

现在您的CSS应该正确捆绑。

Now your CSS should be bundled properly.

这篇关于CSS文件不要使用webpack创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！