Sapper / Svelte SASS预处理？

Question

所以我正在检查Sapper / Svelte的真实世界实现：https : //github.com/sveltejs/realworld

我已经阅读了很多有关SASS预处理的内容，似乎还没有完全支持SASS预处理，但是上面有一些文档。综上所述，在对webpack.client.config.js文件进行以下修改之后，我应该能够对标签进行预处理：

const svelte = require('rollup-plugin-svelte');
const sass = require('svelte-preprocess-sass').sass;

const config = require('sapper/webpack/config.js');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: config.client.entry(),
    output: config.client.output(),
    resolve: {
        extensions: ['.js', '.html']
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        hydratable: true,
                        emitCss: !config.dev,
                        cascade: false,
                        store: true
                    }
                }
            },
            config.dev && {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            !config.dev && {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{ loader: 'css-loader', options: { sourceMap: config.dev } }]
                })
            }
        ].filter(Boolean)
    },
    plugins: [
    svelte({
      preprocess: {
        style: sass(),
      }
    }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'main',
            async: true,
            children: true
        }),
        config.dev && new webpack.HotModuleReplacementPlugin(),
        !config.dev && new ExtractTextPlugin('main.css'),
        !config.dev && new webpack.optimize.ModuleConcatenationPlugin(),
        !config.dev && new UglifyJSPlugin(),
    ].filter(Boolean),
    devtool: config.dev ? 'inline-source-map' : false
};

我不断收到以下错误：

节点server.js realworldsapper / node_modules / tapable / lib / Tapable.js：375 arguments [i] .apply（this）;

有想法该怎么解决这个吗？

Answer 1

您正在混合和匹配Rollup和webpack，这是两个不同的模块捆绑程序—您正在将rollup-plugin-svelte添加到webpack配置中，而webpack不知道如何处理它，因此会引发错误。

而是在svelte-loader配置文件中使用svelte-preprocess-sass：

use: {
  loader: 'svelte-loader',
  options: {
    hydratable: true,
    emitCss: !config.dev,
    cascade: false,
    store: true,
    style: sass()
  }
}

（请注意，该style: sass()行将成为preprocess: { style: sass() }svelte-loader的未来版本-请参见此问题）。

顺便说一句，您似乎正在使用旧版本的Sapper-最近进行了一些重大改进，因此值得将其升级到0.9。不幸的是，这确实意味着对项目结构进行了一些更改（有关详细信息，请参见迁移指南，或者重新克隆sapper -template并复制routes文件夹）。