0

我有 scss 文件src/css，想通过 webpack 编译它。它似乎不起作用。可能的根本原因是什么？谢谢

    var webpack = require('webpack');
    var path = require('path');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    var CopyWebpackPlugin = require('copy-webpack-plugin');
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    const extractCustomCss = new ExtractTextPlugin('./custom.css');

    const scssCompileOption = {
        test: /\.scss$/,
        include: [
            path.resolve(__dirname, 'src/css')
        ],
        loader: ExtractTextPlugin.extract({
            use: [{
                loader: 'css-loader'
            }, {
                loader: 'sass-loader'
            }],
            fallback: 'style-loader'
        })
    }


    module.exports = {
        entry: {
            index: "./src/App.tsx"
        },
        output: {
            path: path.join(__dirname, "/dist/"),
            filename: "[name].js"
        },

        devtool: 'source-map',
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.json', '.scss']
        },

        module: {
            loaders: [
                {test: /\.json$/, exclude: /node_modules/, loader: 'json'},
            ],
            rules: [
                scssCompileOption

            ]
        },
        devServer: {
            stats: 'errors-only',
            hot: true
        },
        plugins: [
            extractCustomCss
        ]
        // target: 'node'
    };
4

1 回答 1

1

我强烈建议将 Compass 用于所有 css 预处理器编译（例如 less、sass 或 scss）。

通过 Ruby 下载指南针：

$ gem update --system
$ gem install compass

之后访问您的文件目录，

cd your/file/directory

并设置 Compass 环境：

compass init
compass watch

现在你所有的.scss/.sass/etc..扩展文件都被编译了。

有关未来的说明，请访问这些参考资料，或询问我！

如何安装指南针 指南针文档

于 2018-02-28T08:20:31.250 回答