gajus / isomorphic-webpack

Abstracts universal consumption of application code base using webpack.
Other
291 stars 17 forks source link

Error with sass-loader #15

Closed aray12 closed 7 years ago

aray12 commented 7 years ago

I am getting the following error when I try to use the sass-loader.

/node_modules/font-awesome/scss/font-awesome.scss:6
@import "variables";
^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)

On the 2nd line of the my entry script I have

import 'font-awesome/scss/font-awesome.scss';

Works fine normally.

My config is

const config = {
 entry: {
  bundle: [
   path.resolve(__dirname, 'client.js'),
  ],
 },
 output: {
  path: path.resolve(__dirname, 'public'),
  publicPath: process.env.HOST,
  filename: '[name].js',
 },
 resolve: {
  modules: [
   'src',
   'node_modules',
  ],
 },
 module: {
  rules: [
   { test: /\.js$/, loader: 'babel-loader', exclude: [path.resolve(__dirname, '..', 'node_modules')] },
   { test: /\.(png|jpg)$/, loader: 'url-loader', options: { limit: 10240 } },
   { test: /\.react\.svg$/, use: [{ loader: 'babel-loader' }, { loader: 'svg-react-loader' }] },
   {
    test: /^(?!.*\.react).*\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'file-loader',
    options: { mimetype: 'image/svg+xml' },
   },
   {
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
    options: { limit: 10240, mimetype: 'application/font-woff' },
   },
   {
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
    options: { limit: 10240, mimetype: 'application/font-woff' },
   },
   {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
    options: { limit: 10240, mimetype: 'application/octet-stream' },
   },
   { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
   { test: /\.json$/, loader: 'json-loader' },
   {
    test: /^(?!.*\.local).*\.scss$/,
    use: [
     { loader: 'style-loader' },
     { loader: 'css-loader' },
     {
      loader: 'postcss-loader',
      options: {
       sourceMap: true,
       plugins: function() {
        return ([autoprefixer({ browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'] })])
       },
      },
     },
     { loader: 'sass-loader', options: { outputStyle: 'expanded' } },
    ],
   },
   {
    test: /\.local\.scss$/,
    use: [
     { loader: 'style-loader' },
     {
      loader: 'css-loader',
      options: {
       modules: true,
       importLoaders: 2,
       sourceMap: true,
       localIndentName: '[local]___[hash:base64:5]',
      },
     },
     {
      loader: 'postcss-loader',
      options: {
       sourceMap: true,
       plugins: function() {
        return ([autoprefixer({ browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'] })])
       },
      },
     },
     {
      loader: 'sass-loader', options: {
      outputStyle: 'expanded'
     }
     },
    ],
   },
  ]
 }
}
aray12 commented 7 years ago

Never mind. Realize now I have to whitelist items in node_modules