主页 / 问题 / 719525
Accepted
ruslik
Asked:2020-09-17 20:18:32 +0800 CST2020-09-17 20:18:32 +0800 CST

webpack 3 scss编译不起作用

  • 772
const path = require('path');
const ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
    context: __dirname,

    entry : {
        common: './source/js/common.js'
    },

    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'sass-loader'
                    ]
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('common.css')
    ]
}

时间：133ms 资产大小块块名称 common.js 2.53 kB 0 [emitted] common [0] ./source/js/common.js 53 bytes {0} [built]

未生成 CSS 文件。如何查看插件是否正在运行。也许有一个记录器？

webpack

2 个回答

  1. Best Answer

    安装模块：

    npm i -D extract-text-webpack-plugin

    我们连接：

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

    好吧，模块的代码放在一个单独的文件中：

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

module.exports = function (paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.css$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].css')
        ]
    };
};

    使用“webpack-merge”包合并到主配置中。如果您不想将其放在单独的文件中，则只需将其包含在 webpack.config.js 中并粘贴：

    module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].css')
        ]
    };

    好吧，不要忘记更正文件的路径。

    • 2

  2. 并且文档中的选项不适合您？

    module.exports = {
    entry : './source/js/common.js',
    output: {
        path: __dirname + "./public/js",
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    },
}
    • 1

相关问题