萨斯瓦斯装入器

从 Webpack 配置或 JSON 文件导入 Sass vars

此加载器允许您使用以下定义的 Sass 变量:

支持两种语法类型 :

支持热重装 :

安装

使用 npm 数据

npm install @epegzz/sass-vars-loader --save-dev

使用线条

yarn add @epegzz/sass-vars-loader --dev

使用量

看这个 示例 Webpack 配置文件 看如何使用这个 加载机与 样式装入器 财务报告和审定财务报表 装弹机

备选方案1:网络包装配置中的内置Sass vars

// styles.css:

.some-class {
  background: $greenFromWebpackConfig;
}

// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          // Option 1) Specify vars here
          vars: {
            greenFromWebpackConfig: '#0f0'
          }
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

选项2:从 JSON 文件装入 Sass vars

// config/sassVars.json

{
  "purpleFromJSON": "purple"
}

// styles.css:

.some-class {
  background: $purpleFromJSON;
}

// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          files: [
            // Option 2) Load vars from JSON file
            path.resolve(__dirname, 'config/sassVars.json')
          ]
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

选项 3: 从 JavaScript 文件装入 Sass vars

// config/sassVars.js

module.exports = {
  blueFromJavaScript: 'blue'
};

// styles.css:

.some-class {
  background: $blueFromJavaScript;
}

// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          files: [
            // Option 3) Load vars from JavaScript file
            path.resolve(__dirname, 'config/sassVars.js')
          ]
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Pro Tip: 将物体作为 Sass vars 使用 !

使用 地图( g) 用于将对象用作 Sass vars :

// config/sassVars.js

module.exports = {
  lightTheme: {
    background: 'white',
    color: 'black'
  },
  darkTheme: {
    background: 'black',
    color: 'gray'
  }
};

// styles.css:

$theme: $lightTheme;

.some-class {
  background: map_get($theme, background);
  color: map_get($theme, color);
}