1 | # @shopify/slate-cssvar-loader
|
2 |
|
3 | Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding liquid variable found in the provided `cssVariablesPath` option.
|
4 |
|
5 | ## Install
|
6 |
|
7 | ```
|
8 | npm install --save-dev @shopify/slate-cssvar-loader
|
9 | ```
|
10 |
|
11 | ## Usage
|
12 |
|
13 | ### webpack.config.js example
|
14 |
|
15 | ```
|
16 | module.exports = {
|
17 | module: {
|
18 | rules: [
|
19 | {
|
20 | test: /\.s[ac]ss$/,
|
21 | use: [
|
22 | {
|
23 | loader: '@shopify/slate-cssvar-loader',
|
24 | },
|
25 | {loader: 'css-loader'},
|
26 | {loader: 'sass-loader'},
|
27 | ]
|
28 | }
|
29 | ]
|
30 | }
|
31 | }
|
32 | ```
|
33 |
|
34 | ## Configuration
|
35 |
|
36 | The `slate-cssvar-loader` can be configured via the theme's `.slaterc` file.
|
37 |
|
38 | ### .slaterc example
|
39 |
|
40 | ```json
|
41 | {
|
42 | "cssVarLoaderEnable": true,
|
43 | "cssVarLoaderLiquidPath": ["src/snippets/css-variables.liquid"]
|
44 | }
|
45 | ```
|
46 |
|
47 | * `cssVarLoaderEnable`: Enable/disable cssvar loader plugin
|
48 | * `cssVarLoaderLiquidPath`: An array of string paths to liquid files that associate css variables to liquid variables
|