V
V
Vyacheslav Sobolev2019-02-05 17:21:33
Sass
Vyacheslav Sobolev, 2019-02-05 17:21:33

How to configure webpack for scss(compass) only?

It took me to collect only sass, with compass and sprites. The usual compass does not suit. it doesn't know how to import_once, and all solutions still import but don't add content. When there are a lot of imports, the assembly process is greatly delayed. I decided to try to build webpack, threw in the config, but of course nothing happened, there are 2 types of errors:


ERROR in ./scss/stroyka.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
\@import "/img/stroyka/*.png";
^
File to import not found or unreadable: /img/stroyka/*.png.
in ~/scss/pages/_stroyka.scss (line 3, column 1)

and

ERROR in ./scss/calendar.scss 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #calendar {
| position: absolute;
| visibility: hidden;

And if the first one is more or less clear what is happening, but it is not clear how to solve it. What is wrong with the second one is not at all clear, why he doesn’t like selectors (not only "#", but also ".", and "tag")
Here is my config:
const path = require('path');
const glob = require('glob');

function toObject(paths) {
  var ret = {};
  paths.forEach(function(p) {
    ret[p.split('/').slice(-1)[0].split('.scss')[0]] = path.resolve(__dirname, p); 
  });
  
  return ret;
}

module.exports = {
  entry: toObject(glob.sync('scss/*.scss')),
  output: {
    path: path.resolve(__dirname, 'css'),
    publicPath: '/css',
    filename: '[name].css'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        {
          loader: 'sass-loader',
          options: {
            includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
          },
        }
      ]
    }]
  }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question