akveo / ng2-smart-table

Angular Smart Data Table component
https://akveo.github.io/ng2-smart-table/
MIT License
1.63k stars 878 forks source link

Webpack and SCSS parser not working #72

Open ghost opened 7 years ago

ghost commented 7 years ago

I'm trying to setup smart table but I'm getting this error - (I understand that it's a sass/css loading issue but I'm not sure how to resolve it)

client:75./~/css-loader!./~/ng2-smart-table/build/src/ng2-smart-table/components/title/title.scss
Module build failed: CssSyntaxError: /css-loader!/Users/charlie/Documents/swiddle/code/swdl/comms-engine-fe/node_modules/ng2-smart-table/build/src/ng2-smart-table/components/title/title.scss:29:3: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

  27 |   //  border-right: 4px solid transparent;
  28 |   //  margin-bottom: 2px;
> 29 |   //}
     |   ^
  30 | 
  31 |   &.desc::after {

    at Input.error (/source/input.es6:90:22)
    at Parser.unknownWord (/source/parser.es6:433:26)
    at Parser.other (/source/parser.es6:153:14)
    at Parser.loop (/source/parser.es6:55:22)
    at parse (/source/parse.es6:15:16)
    at new LazyResult (/source/lazy-result.es6:42:24)
    at Processor.process (/source/processor.es6:95:16)
    at processCss (/Users/charlie/Documents/swiddle/code/swdl/comms-engine-fe/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/charlie/Documents/swiddle/code/swdl/comms-engine-fe/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/ng2-smart-table/build/src/ng2-smart-table/components/title/title.scss 4:14-79

webpack.config.js:

      `{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'sass-loader')
        }`
d-kostov-dev commented 7 years ago

+1

d-kostov-dev commented 7 years ago

Ok fixed it. This worked for me:

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
},