3

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

我已经阅读了很多关于 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
};

我不断收到以下错误：

node server.js realworldsapper/node_modules/tapable/lib/Tapable.js:375 个参数[i].apply(this);

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

4

2 回答 2

9

您正在混合和匹配 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文件夹）。

于 2018-03-14T12:26:01.973 回答
2

您应该添加exclude: /node_modules/到每个规则：

test: /\.css$/, exclude: /node_modules/, // <- Add this

这确保不会对 node_modules 文件夹中的任何文件应用转译。

于 2018-03-14T07:41:52.157 回答