@metahub/karma-sass-preprocessor

    4.0.0 • Public • Published

    karma-sass-preprocessor

    Karma preprocessor to compile sass and scss files with node-sass.

    Travis AppVeyor Codecov Greenkeeper badge license

    Installation

    npm install node-sass @metahub/karma-sass-preprocessor --save-dev

    Configuration

    All the node-sass options can be passed to sassPreprocessor.options.

    In addition the preprocessor accept a transformPath function, to rewrite the path on which the files are deployed on the Karma webserver. If not specified, the processed files will be accessible with the same paths as the originals with the extension .css instead of .sass or .scss. For example test/fixtures/myStyle.scss will be deployed as base/test/fixtures.myStyle.css.

    Standard

    module.exports = function(config) {
      config.set({
        files: ['src/sass/main.scss'],
     
        plugins: ['@metahub/karma-sass-preprocessor', 'karma-*'],
        preprocessors: {
          '**/*.scss': ['sass']
        },
     
        sassPreprocessor: {
          options: {
            // To include inlined sourcemaps as data URIs
            sourceMap: true,
            // If compiled sass/scss files import external libraries
            includePaths: ['node_modules', 'path/to/imported/lib'],
            outputStyle: 'expanded',
          },
          // File src/sass/main.sccs will be accessible in the unit test on path base/styles/main.css
          transformPath: filePath => filePath.replace(/\.sccs$/, '.css').replace('src/sass', 'styles')
        },
      });
    };

    Note: Karma can auto-load plugins named karma-* (see plugins). Unfortunatly it doesn't work with scoped packages, therefore @metahub/karma-sass-preprocessor has to be explicitly added to the plugins configuration. In order to continue to automatically load other plugins you can add karma-* to the plugins configuration.

    Note: @metahub/karma-sass-preprocessor embed its own watcher to monitor sass dependency, therefore only the sass entry point has to be configured in Karma. If Karma is configured with autoWatch: true, the modification of an imported sass partial will trigger a new build and test run.

    Configured Preprocessors

    See configured preprocessors.

    module.exports = function(config) {
      config.set({
        files: ['src/sass/main.scss', 'test/fixtures/myFixture.scss'],
     
        plugins: ['@metahub/karma-sass-preprocessor', 'karma-*'],
        preprocessors: {
          'src/**/*.scss': ['sass_1'],
          'test/fixtures/**/*.scss': ['sass_2'],
        },
     
        customPreprocessors: {
          sass_1: {
            base: 'sass',
            options: {
              sourceMap: true,
              precision: 5,
              outputStyle: 'expanded',
            },
          },
          sass_2: {
            base: 'sass',
            // File test/fixtures/myFixture.sccs will be accessible in the unit test on path base/2/myFixture.css
            transformPath: filePath => filePath.replace(/\.sccs$/, '.css').replace('test/fixtures', '2')
            options: {
              sourceMap: false,
              precision: 8,
              outputStyle: 'compressed',
            },
          },
        },
      });
    };

    Install

    npm i @metahub/karma-sass-preprocessor

    DownloadsWeekly Downloads

    4

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • pvdlg