How to use css-loader - 5 common examples

To help you get started, we’ve selected a few css-loader examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-static / react-static / packages / react-static-plugin-stylus / src / node.api.js View on Github external
ExtractCssChunks.loader,
        cssLoader,
        postCssLoader,
        stylusLoader,
      ]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, postCssLoader, stylusLoader]
    } else {
      // Prod

      // for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
      // for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
      const cssLoaderVersion = require('css-loader/package.json').version
      if (semver.satisfies(cssLoaderVersion, '<2') === true) {
        cssLoader.options.minimize = true
      }

      loaders = [
        ExtractCssChunks.loader,
        cssLoader,
        postCssLoader,
        stylusLoader,
      ]
    }

    config.module.rules[0].oneOf.unshift({
      test: /\.styl$/,
      use: loaders,
    })
github react-static / react-static / packages / react-static-plugin-sass / src / node.api.js View on Github external
},
        cssLoader,
        postCssLoader,
        sassLoader,
      ]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, postCssLoader, sassLoader]
    } else {
      // Prod

      // for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
      // for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
      const cssLoaderVersion = require('css-loader/package.json').version
      if (semver.satisfies(cssLoaderVersion, '<2') === true) {
        cssLoader.options.minimize = true
      }

      loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, sassLoader]
    }

    config.module.rules[0].oneOf.unshift({
      test: /\.s(a|c)ss$/,
      use: loaders,
    })

    if (
      config.optimization.splitChunks &&
      config.optimization.splitChunks &&
      config.optimization.splitChunks.cacheGroups.styles
    ) {
github react-static / react-static / packages / react-static-plugin-less / src / node.api.js View on Github external
},
        cssLoader,
        postCssLoader,
        lessLoader,
      ]
    } else if (stage === 'node') {
      // Node
      // Don't extract css to file during node build process
      loaders = [cssLoader, postCssLoader, lessLoader]
    } else {
      // Prod

      // for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
      // for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
      const cssLoaderVersion = require('css-loader/package.json').version
      if (semver.satisfies(cssLoaderVersion, '<2') === true) {
        cssLoader.options.minimize = true
      }

      loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, lessLoader]
    }

    config.module.rules[0].oneOf.unshift({
      test: /\.less$/,
      use: loaders,
    })

    return config
  },
})
github 4Catalyzer / astroturf / src / css-loader.js View on Github external
postcss(this, css, map, meta, (err, ...args) => {
    if (err) {
      done(err);
      return;
    }

    const ctx = { ...this };
    ctx.query = {
      ...this.query,
      modules: this.query.modules || true,
      importLoaders: 0,
    };

    cssLoader.call(ctx, ...args);
  });
};
github remaxjs / remax / packages / @remax / cli / src / webpack-config.js View on Github external
const path = require('path');
const CreateFileWebpack = require('create-file-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const fs = require('fs');
const babelPluginComponentStaticInfo = require('@remax/babel-plugin-remax-static-info');
const ejs = require('ejs');

const thisNodeMoudles = name => require.resolve(name);

const getLocalIdent = require('css-loader/dist/utils.js').getLocalIdent;

const cssLoader = thisNodeMoudles('css-loader');
const babelLoader = thisNodeMoudles('babel-loader');
const lessLoader = thisNodeMoudles('less-loader');

const babelPresetEnv = thisNodeMoudles('@babel/preset-env');
const babelPresetReact = thisNodeMoudles('@babel/preset-react');
const babelPluginComponentStaticInfoPath = thisNodeMoudles('@remax/babel-plugin-remax-static-info');

const readJSON = file => JSON.parse(fs.readFileSync(file, 'utf-8'));

function GeneraeBaseWxmlWebpackPlugin() {
  const apply = (compiler) => {
    const emit = (compilation, cb) => {
      const {
        components,

css-loader

css loader module for webpack

MIT
Latest version published 26 days ago

Package Health Score

91 / 100
Full package analysis