10 examples of 'npm sass loader' in JavaScript

46
function generateSassResourceLoader() {
47
	var loaders = [
48
		cssLoader,
49
		'sass-loader', {
50
			loader: 'sass-resources-loader',
51
			options: {
52
				resources: [
53
					resolveResouce('mixins/index.scss'),
54
					resolveResouce('vars/index.scss')
55
				]
56
			}
57
		}
58
	];
59
	if (options.extract) {
60
		return ExtractTextPlugin.extract({
61
			use: loaders,
62
			fallback: 'vue-style-loader'
63
		})
64
	} else {
65
		return ['vue-style-loader'].concat(loaders)
66
	}
67
}

16
export default nodeLoader(function css(uri) {
17
  return new RSVP.Promise((resolve, reject) => {
18
    if (document.querySelector(`link[href="${uri}"]`)) {
19
      return resolve();
20
    }
21
22
    // Try using the default onload/onerror handlers...
23
    const link = createLoadElement('link', resolve, function(error) {
24
      if (this.parentNode) {
25
        this.parentNode.removeChild(this);
26
      }
27
      reject(error);
28
    });
29
30
    link.rel = 'stylesheet';
31
    link.href = uri;
32
33
    document.head.appendChild(link);
34
35
    // In case the browser doesn't fire onload/onerror events, we poll the
36
    // the list of stylesheets to see when it loads...
37
    function checkSheetLoad() {
38
      const resolvedHref = link.href;
39
      const stylesheets = document.styleSheets;
40
      let i = stylesheets.length;
41
42
      while (i--) {
43
        const sheet = stylesheets[i];
44
        if (sheet.href === resolvedHref) {
45
          // Unfortunately we have no way of knowing if the load was
46
          // successful or not, so we always resolve.
47
          setTimeout(resolve);
48
          return;
49
        }
50
      }
51
52
      setTimeout(checkSheetLoad);
53
    }
54
55
    setTimeout(checkSheetLoad);
56
  });
57
});

765
enableSassLoader(sassLoaderOptionsCallback = () => {}, encoreOptions = {}) {
766
    webpackConfig.enableSassLoader(sassLoaderOptionsCallback, encoreOptions);
767
768
    return this;
769
}

42
importer: function importer(url, prev){
43
    var regex = /^~/;
44
    if (!url.match(regex)) {
45
46
        var cssImportRegex = /^((\/\/)|(http:\/\/)|(https:\/\/))/;
47
        // if we don't escape this, then it's breaking the normal css @import
48
        if (url.match(cssImportRegex)) {
49
            return {file: '\'' + url + '\''};
50
        }
51
52
        return {file: url};
53
    }
54
55
    var newFile = path.join(__dirname, 'node_modules', url.replace(regex, ''));
56
    return {file: newFile};
57
}

4
module.exports = function sassVariableOverrideLoader(source) {
5
  this.cacheable && this.cacheable();
6
7
  const webpackRemainingChain = loaderUtils.getRemainingRequest(this).split('!');
8
  const filename = webpackRemainingChain[webpackRemainingChain.length - 1];
9
  const query = loaderUtils.parseQuery(this.query);
10
  const location = query.location;
11
12
  if (!location || !AXIOM_SASS_VARIABLE_FORMAT.test(filename)) {
13
    return source;
14
  }
15
16
  this.addDependency(location);
17
18
  return `
19
    ${source}
20
21
    const userVars = require('${location}');
22
    module.exports = Object.keys(module.exports || {}).reduce((vars, key) => {
23
      return Object.assign({}, vars, {
24
        [key]: (userVars[key] || module.exports[key]),
25
      });
26
    }, {});
27
  `;
28
};

56
function compileSass(sassFile, cssFile, isDebug) {
57
	let result = sass.renderSync({
58
		sourceMap: false,
59
		file: sassFile,
60
		outputStyle: isDebug ? "expanded" : "compressed"
61
	});
62
	if (result && result.css) {
63
		result = result.css.toString();
64
		if (cssFile) {
65
			console.log("Compiling", cssFile);
66
			fs.writeFileSync(cssFile, result, "utf8");
67
		}
68
	} else {
69
		console.warn("No result from sass for ", sassFile);
70
	}
71
	return result;
72
}

13
function sassImports({ imports: { sass = [] } = {} }) {
14
  return sass.reduce((acc, i) => {
15
    return `${acc}\n@import '${importLocation(__OTUPUT_FOLDER_SASS__, i)}';`;
16
  }, '');
17
}

166
addLoader(loader) {
167
    this.loaders.push(loader);
168
}

59
function sassCompile(project, isDevMode) {
60
    const sassCompiler = plugins.sass({
61
        importer: packageImporter({ cwd: project.cwd }),
62
    });
63
    if (isDevMode) {
64
        sassCompiler.on("error", plugins.sass.logError);
65
    }
66
67
    const postcssPlugins = project.sass === "bundle" ? [
68
        // inline all imports
69
        postcssImport(),
70
        // copy all url() assets into dist/resources/...
71
        postcssUrl({
72
            assetsPath: "./assets",
73
            basePath: [
74
                // search current package and core resources
75
                "../resources",
76
                "../../core/resources",
77
                // if new resources are added to packages, they'll need to be listed here
78
            ],
79
            url: "copy",
80
        }),
81
    ] : [];
82
    // always run autoprefixer
83
    postcssPlugins.push(autoprefixer(config.autoprefixer));
84
85
    return gulp.src(config.srcGlob(project, true))
86
        .pipe(plugins.sourcemaps.init())
87
        .pipe(sassCompiler)
88
        .pipe(plugins.postcss(postcssPlugins, {
89
            to : blueprint.destPath(project, "dist.css"),
90
        }))
91
        .pipe(plugins.stripCssComments({ preserve: /^\*/ }))
92
        .pipe(plugins.replace(/\n{3,}/g, "\n\n"))
93
        // see https://github.com/floridoo/vinyl-sourcemaps-apply/issues/11#issuecomment-231220574
94
        .pipe(plugins.sourcemaps.write(".", { sourceRoot: null }))
95
        .pipe(gulp.dest(blueprint.destPath(project)))
96
        .pipe(plugins.count({
97
            logFiles: `write ${plugins.util.colors.yellow("<%= file.relative %>")}`,
98
            message: false,
99
        }))
100
        // only bundled packages will reload the dev site
101
        .pipe(project.sass === "bundle" ? plugins.connect.reload() : plugins.util.noop());
102
}

25
async function sassRender(sourceFile) {
26
  const template = await readFile(templateFile, 'utf-8');
27
  const match = delimiter.exec(template);
28
  if (!match) {
29
    throw new Error(`Template file ${templateFile} did not contain template delimiters`);
30
  }
31
  console.log(`Processing ${sourceFile}`);
32
  const replacement = await sassToCss(sourceFile);
33
  const newContent = template.replace(delimiter, replacement);
34
  const outputFile = sourceFile.replace('.scss', '-css.js').replace('scss', 'src/styles');
35
  return writeFile(outputFile, newContent, 'utf-8');
36
}