Question

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

所以我添加了css-loader和sass-loader。但是，webpack不会创建我的CSS文件夹。我的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: ['./'] }
            }
        )
    ]
}

你有什么想法吗？

谢谢！

Answer 1

你可以使用样式！css！sass加载器。只需使用npm安装它们，然后在webpack.config中设置下面的配置。

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

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

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应该正确捆绑。

Answer 2

plugins应该是root属性，而不是module的属性。

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: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css')
    ]
}

Answer 3

您必须在某处导入scss文件，例如index.js或App.js：

e.g。 import './sass/main.scss';

CSS文件不能用webpack创建

3 个答案: