时间戳

首页 > 解决方案 > Svelte 3 无法编译 SCSS

sass - Svelte 3 无法编译 SCSS

问题描述

我想在我的 Svelte 应用程序中使用 SCSS。为此，我决定使用svelte-preprocess包。所以，这是App.svelte组件：

<script>

</script>

<main>
  <h1 class="boom">Hello world!</h1>
</main>

<style type="text/scss">
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;

    .boom {
      color: #ff3e00;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
    }
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

这是package.json文件内的依赖项列表：

    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "node-sass": "^5.0.0",
    "rollup": "^2.34.0",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.30.0",
    "svelte-preprocess": "^4.6.1"

这是rollup.config.js文件：

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import replace from '@rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';

const isDevelopment = process.env.APP_ENV === 'development';

export default {
  input: 'src/index.js',
  output: {
    sourcemap: false,
    format: 'iife',
    name: 'app',
    file: 'public/js/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: isDevelopment,
      },
      preprocess: sveltePreprocess(),
    }),

    // css({output: 'bundle.css'}),

    resolve({
      browser: true,
      dedupe: ['svelte'],
    }),
    commonjs(),

    replace({
      IS_DEVELOPMENT: isDevelopment,
    }),

    isDevelopment && serve({
      contentBase: 'public',
      historyApiFallback: true,
      host: '0.0.0.0',
      port: process.env.PORT || 5000,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    }),

    isDevelopment && livereload('public'),

    !isDevelopment && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

我按照该包中的说明进行操作，但是当我尝试构建我的应用程序时，我在控制台中收到此错误：

rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
                ^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)

我猜这是汇总配置或某些依赖项版本的问题。但是如何理解它以及如何解决这个问题呢？

标签： sasssvelterollupsvelte-3

解决方案

问题在于您css({output: 'bundle.css'}),在rollup.config.js中注释掉该行，而该行显示一切正常。

推荐阅读