带有材料-ui布局的Rollup.js构建错误-包括网格组件

Question

我通过“”软件包将Material集成到我的Svelte项目中。

但它不包含材料布局-网格组件。

我使用yarn add "@material/layout-grid"命令单独安装了它。

但是现在我在构建过程中遇到了错误：

[!] (plugin postcss) Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
node_modules/@material/layout-grid/mdc-layout-grid.scss
Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
    at options.error (/media/hdd-home/d/WebServers/home/spadmin.org/public_html/todoapp/node_modules/node-sass/lib/index.js:291:26)

所以，我放弃了自己解决这个问题。

package.json项目

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv ."
  },
  "devDependencies": {
    "@mdi/js": "^5.3.45",
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@smui/button": "^1.0.0-beta.21",
    "@smui/card": "^1.0.0-beta.21",
    "@smui/checkbox": "^1.0.0-beta.21",
    "@smui/chips": "^1.0.0-beta.21",
    "@smui/common": "^1.0.0-beta.21",
    "@smui/form-field": "^1.0.0-beta.21",
    "@smui/linear-progress": "^1.0.0-beta.21",
    "@smui/textfield": "^1.0.0-beta.21",
    "@smui/top-app-bar": "^1.0.0-beta.21",
    "material": "^0.4.3",
    "node-sass": "^4.14.1",
    "rollup": "^2.3.4",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-postcss": "^3.1.1",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.7.4"
  },
  "dependencies": {
    "@material/layout-grid": "^6.0.0",
    "sirv-cli": "^0.4.4"
  }
}

这是rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import livereload from 'rollup-plugin-livereload';
import {terser} from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;


export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'scripts/app.js',
  },
  plugins: [
    copy({
      targets: [
        {src: 'src/index.html', dest: '.'},
      ],
    }),
    svelte({
      dev: !production,
      emitCss: true,
      css: css => {
        css.write('css/app.css');
      },
      preprocess: autoPreprocess()
    }),
    resolve({
      browser: true,
      dedupe: ['svelte', '@material'],
    }),
    commonjs(),
    postcss({
      extract: 'css/app.css',
      minimize: true,
      sourceMap: true,
      use: [
        [
          'sass', {
          includePaths: [
            './theme',
            './node_modules',
          ],
        },
        ],
      ],
    }),

    !production && serve(),
    !production && livereload({watch: ['scripts', 'css', 'src', 'theme']}),
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        });
      }
    },
  };
}

Answer 1

它显然试图将scss文件解析为css。因此，它可能错过了编译步骤。我在您的package.json中找不到scss汇总插件。

检查一下，它可以解决您的问题：https://www.npmjs.com/package/rollup-plugin-scss