Installation

Install with Default Styles

If you want a fast and basic setup, without custom SCSS/SASS, then only installing svelte-materialify should be fine:

$ npm i svelte-materialify

Install with Custom Styles

If you want finer control over Svelte Materialify, install all its peer dependencies:

$ npm i -D svelte-materialify svelte-preprocess sass postcss

Now create a _material-theme.scss file. Let’s put it in a folder called theme.

Include the folder path in the sveltePreprocess function in your rollup.config.js:

svelte({
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['theme'],
    },
  }),
  ...

For better intellisense, you can instead create a svelte.config.js and add it to the root of the project:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['theme'],
    },
  }),
};

Now you can import this file from your main config file, like shown below:

const { preprocess } = require('./svelte.config');

export default {
  // some config...,
  plugins: [
    svelte({ preprocess }),
    // more plugins...
  ],
};

const { preprocess } = require('./svelte.config');

module.exports = {
  // some config...
  module: {
    rules: [
      {
        test: /.(svelte|html)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            // svelte options...,
            preprocess,
          },
        },
      },
    ],
  },
};

const { preprocess } = require('./svelte.config');

export default {
  client: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
  },
  server: {
    plugins: [
      svelte({
        preprocess,
        // ...
      }),
    ],
  },
};

Templates

Basic setup done for you:

npx degit TheComputerM/sveltekit-materialify my-sveltematerialify-project

cd my-svelte-project

npm install
npm run dev