scss compile

[gogs85]

I found the following issue:

Describe in as much detail as possible the issue you have discovered.

I have problem to use scss in webpack:

// webpack.config.js const webpack = require('webpack'); const {resolve} = require('path'); const globby = require('globby'); const {getIfUtils, removeEmpty} = require('webpack-config-utils'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const EventHooksPlugin = require('event-hooks-webpack-plugin'); const plConfig = require('./patternlab-config.json'); const patternlab = require('patternlab-node')(plConfig); const patternEngines = require('patternlab-node/core/lib/pattern_engines'); const merge = require('webpack-merge'); const customization = require(${plConfig.paths.source.app}/webpack.app.js`);
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const bundleExtractPlugin = new ExtractTextPlugin({
filename: './public/css/bundle.css',
});

module.exports = env => {
const {ifProd, ifDev} = getIfUtils(env);

const config = merge.smartStrategy(plConfig.webpackMerge)({
devtool: ifDev('source-map'),
context: resolve(__dirname, 'source'),
node: {
fs: "empty"
},
entry: {
// Gathers any Source JS files and creates a bundle
//NOTE: This name can be changed, if so, make sure to update _meta/01-foot.mustache
"js/pl-source":
globby.sync([resolve(plConfig.paths.source.js + '**/*.js')]).map(function (filePath) {
return filePath;
})
},
output: {
path: resolve(__dirname, 'public'),
filename: '[name].js'
},
plugins: removeEmpty([
ifDev(
// Live reloading in development only
new webpack.HotModuleReplacementPlugin(),

  ),
  ifProd(
    new webpack.optimize.UglifyJsPlugin({
      // Compresses in production any bundle
      sourceMap: true,
      uglifyOptions: {
        mangle: false
      }
    })
  ),
  new webpack.optimize.CommonsChunkPlugin({
    // Combines any node module libraries used into their own file
    name: 'js/pl-vendor-libraries',
    chunks: ['js/pl-source'],
    minChunks: module => {
      return module.context && /node_modules/.test(module.context);
    }
  }),
  new CopyWebpackPlugin([
    {
      // Copy all images from source to public
      context: resolve(plConfig.paths.source.images),
      from: './**/*.*',
      to: resolve(plConfig.paths.public.images)
    },
    {
      // Copy favicon from source to public
      context: resolve(plConfig.paths.source.root),
      from: './*.ico',
      to: resolve(plConfig.paths.public.root)
    },
    {
      // Copy all web fonts from source to public
      context: resolve(plConfig.paths.source.fonts),
      from: './*',
      to: resolve(plConfig.paths.public.fonts)
    },
    {
      // Copy all css from source to public
      context: resolve(plConfig.paths.source.css),
      from: './*.css',
      to: resolve(plConfig.paths.public.css),
       bundleExtractPlugin,
    },
    {
      // Styleguide Copy everything but css
      context: resolve(plConfig.paths.source.styleguide),
      from: './**/*',
      to: resolve(plConfig.paths.public.root),
      ignore: ['*.css']
    },
    {
      // Styleguide Copy and flatten css
      context: resolve(plConfig.paths.source.styleguide),
      from: './**/*.css',
      to: resolve(plConfig.paths.public.styleguide, 'css'),
      flatten: true
    }
  ]),
  new EventHooksPlugin({
    // Before WebPack compiles, call the pattern build API, once done, bundle continues
    'before-compile': function(compilationParams, callback){
      patternlab.build(callback, plConfig.cleanPublic);
    }
  }),
  new EventHooksPlugin({
    'after-compile': function(compilation, callback) {  
      // watch supported templates
      const supportedTemplateExtensions = patternEngines.getSupportedFileExtensions();
      const templateFilePaths = supportedTemplateExtensions.map(function (dotExtension) {
        return plConfig.paths.source.patterns + '/**/*' + dotExtension;
      });

      // additional watch files
      const watchFiles = [
        plConfig.paths.source.patterns + '/**/*.json',
        plConfig.paths.source.patterns + '**/*.md',
        plConfig.paths.source.data + '**/*.json',
        plConfig.paths.source.fonts + '**/*',
        plConfig.paths.source.images + '**/*',
        plConfig.paths.source.js + '**/*',
        plConfig.paths.source.meta + '**/*',
        plConfig.paths.source.annotations + '**/*'
      ];

      const allWatchFiles = watchFiles.concat(templateFilePaths);

      allWatchFiles.forEach(function(globPath) {
        const patternFiles = globby.sync(globPath).map(function (filePath) {
          return resolve(filePath);
        });

        compilation.fileDependencies = compilation.fileDependencies.concat(patternFiles);
      });

      // signal done and continue with build
      callback();
    }
  }),
]),
devServer: {
  contentBase: resolve(__dirname, 'public'),
  port: plConfig.server.port,
  open:true,
  watchContentBase: false
},
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: resolve('node_modules'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', { modules: false }]
          ]
        }
      }]
    },
    {
      test: /.scss$/,
      exclude: [/node_modules/],
      use: bundleExtractPlugin.extract({
          use: ['css-loader', 'sass-loader'],
      }),
  },
  ]
}

}, customization(env))

return config
}
`

Recommendations on Solutions:

[mbulfair]

Hello @gogs85 Not really sure what error you're experiencing, but unless you're importing .scss in the .js files, you don't have a .scss entry defined. Also, I would recommend putting your changes in _app/webpack.app.js webpack merge will do this for you and you can add all the things you need for scss files.

[renestalder]

Add a scss rule to webpack.app.js and install style-loader, css-loader and sass-loader via npm (if not already done). Then add scss to the resolved extensions.

const app = {
    entry: yourEntryDefinition,
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
          })
        }
      ]
    },
    // ...
    resolve: {
      extensions: ['.js', '.tsx', '.ts', '.css', '.scss']
    }
  };

Not in particular a problem with this patternlab edition. You have all freedom in the webpack.app.js to configure and use webpack the way you need it.

[gogs85]

Ahh, great, thank you very much :)

[jeroenkampinga]

@renestalder I've used your example to extend the webpack tasks. But on each .scss file save the mustache files are also getting build. Is this default behaviour, or something wrong with my setup?

[renestalder]

@jeroenkampinga Yes, it's currently the same for me.

[jeroenkampinga]

@renestalder Okay, that's too bad. When saving an .scss file the whole task takes around 7-8 seconds to finish.

It also looks like the mustache files are processed twice. At least it's shown twice in the output. Is this also the case in your setup?

[renestalder]

@jeroenkampinga Yeah, you're right, seems to run twice or at least logs it like it runs twice. But since I only used that in a small pattern library and it worked, I didn't bother that match.

I assume the watcher in the webpack.config.babel.js does a bit more than It should. I don't think that it has something to do with the Scss setup how it is.

[mbulfair]

#23 has been opened to address and fix this.