Skip to main content

stylable.config.js

The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.

The configuration file should be located in the project root directory in order to be picked up automatically.

defaultConfig

The defaultConfig export field is used to set default configuration for Stylable instances across all integrations and tooling.

Currently, the following options are supported:

stylable.config.js - example
const { createDefaultResolver } = require('@stylable/core');
const { createNamespaceStrategyNode } = require('@stylable/node');
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
defaultConfig(fs) {
return {
// set a custom namespace resolver
resolveNamespace: createNamespaceStrategyNode({
prefix: 'mylib',
strict: true,
}),

// set a custom module resolver with TS paths resolution
resolveModule: createDefaultResolver(fs, {
plugins: [
new TsconfigPathsPlugin({
configFile: require.resolve('./tsconfig.json'),
extensions: ['.st.css'],
}),
],
}),
};
},
};

stcConfig

The stcConfig export field is used as a single point to define multiple build tasks for the Stylable CLI.

To run this configuration, either run the CLI using the stc command, or pass the stcConfig option to the Webpack or rollup integrations.

const { stcConfig } = require('@stylable/cli');

// use the `stcConfig` function to get type completion and validation
exports.stcConfig = stcConfig({

// build type definitions for all stylesheets into the st-types directory
options: {
srcDir: './src',
outDir: './st-types',
dts: true
}
});
Multiple build tasks interface

Projects allow sharing `stc` configurations and management of Stylable projects in one location. They provides a controllable and predictable build order with caching optimizations.

interface MultipleProjectsConfig<PRESET extends string> {
options?: PartialBuildOptions;
presets?: Presets<PRESET>;
projects: Projects<PRESET>;
projectsOptions?: {
resolveRequests?: ResolveRequests;
};
}

type Projects =
| Array<string | [string, ProjectEntryValues]>
| Record<string, ProjectEntryValues>;

type ProjectEntryValues<PRESET extends string> =
| ProjectEntryValue<PRESET>
| Array<ProjectEntryValue<PRESET>>;

type ProjectEntryValue<PRESET extends string> =
| PRESET
| PartialBuildOptions
| {
preset?: PRESET;
presets?: Array<PRESET>;
options: PartialBuildOptions;
};

To learn more about the various CLI flags, see the CLI page.

webpackPlugin

The webpackPlugin export field is used to configure any Stylable Webpack plugins in the project. The StylableWebpackPlugin will attempt to load the nearest stylable.config.js file and use its webpackPlugin export as for its options.

To learn more about the building Stylable using Webpack, see the Webpack integration page.