Webpack / React，如何解决scss加载错误？

Question

我安装了style-loader，css-loader，sass-loader和node-sass。我认为webpack.config文件设置正确...虽然我似乎缺少一些东西。请帮忙！

package.json

{
  "name": "pluralsight-redux-starter",
  "version": "1.0.0",
  "description": "Starter kit for React and Redux Pluralsight course by Cory House",
  "author": "Cory House",
  "license": "MIT",
  "//": "alternative for this include gulp and grunt",
  "scripts": {
    "//": "react specific library, you can use redux with other libraries as well, like angular etc...",
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src": "babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "prebuild": "npm-run-all clean-dist test link build:html",
    "build": "babel-node tools/build.js",
    "postbuild": "babel-node tools/distServer.js"
  },
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "css-loader": "^0.23.1",
    "jquery": "2.2.3",
    "node-sass": "^3.8.0",
    "react": "15.1.0",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "react-toolbox": "^1.0.1",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "sass-loader": "^0.5.0",
    "style-loader": "^0.13.1",
    "toastr": "2.1.2"
  },
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "2.4.5",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "normalize.css": "^4.0.0",
    "react-addons-css-transition-group": "^15.0.0",
    "open": "0.0.5",
    "postcss-loader": "0.8.2",
    "react": "^15.0.2",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "sass-loader": "0.5",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
  }
}

webpack.config.dev.js

import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
    debug: true,
    devtool: 'cheap-module-eval-source-map',
    noInfo: false,
    entry: [
        'eventsource-polyfill', // necessary for hot reloading with IE
        'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
        './src/index.js'
    ],
    target: 'web',
    output: {
        path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './src'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],

    resolve: {
      extensions: ['', '.css', '.scss', '.js']
    },


    // Tells webpack the types of files that we want it to handle.
    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /\.s?css$/, loaders: ['style', 'css', 'sass']},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ]

    }
};

控制台中的

错误消息：

SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
    |      ^
  2 |   h1 {
  3 |     color: red;
  4 |   }
    at Parser.pp.raise (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.semicolon (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/util.js:76:38)
    at Parser.pp.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:499:8)
    at Parser.parseExpressionStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:52:20)
    at Parser.pp.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:168:17)
    at Parser.parseStatement (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/plugins/flow.js:30:22)
    at Parser.pp.parseBlockBody (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:529:21)
    at Parser.pp.parseTopLevel (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/statement.js:36:8)
    at Parser.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/parser/index.js:129:19)
    at parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babylon/lib/index.js:47:47)
    at File.parse (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:540:58)
    at File.parseCode (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:626:20)
    at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:52:12
    at File.wrap (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/file/index.js:586:16)
    at Pipeline.transform (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/transformation/pipeline.js:50:17)
    at Object.transformFileSync (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-core/lib/api/node.js:152:10)
    at compile (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:129:20)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:14)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (CourseForm.js:4:1)
    at Module._compile (module.js:541:32)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (CourseForm.Enzyme.test.js:12:1)
    at Module._compile (module.js:541:32)
    at loader (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/lib/mocha.js:468:10)
    at loadAndRun (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:359:22)
    at Object.<anonymous> (/Users/Macbook/projects/pluralsight-redux-starter/node_modules/mocha/bin/_mocha:376:3)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:449:3

test.scss

form {
  h1 {
    color: red;
  }
}

webpack-validator输出：

import webpack from webpack;

似乎导致webpack-validator出现问题，不知道为什么会这样。我不相信它与我的scss加载问题有关。

==> webpack-validator webpack.config.dev.js
Reading: webpack.config.dev.js
/Users/Macbook/projects/pluralsight-redux-starter/webpack.config.dev.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at validateConfig (/usr/local/lib/node_modules/webpack-validator/dist/bin/validate-config.js:13:16)
    at /usr/local/lib/node_modules/webpack-validator/dist/bin/webpack-validator.js:35:32

Answer 1

从错误中看，你只是在.scss

中的某处丢失了一个大括号

SyntaxError: /Users/Macbook/projects/pluralsight-redux-starter/src/styles/test.scss: Unexpected token (1:5)
> 1 | form {
    |      ^
  2 |   h1 {
  3 |     color: red;
  4 |   }

仔细检查test.scss并确保一切正常。

Answer 2

使用以下包解决了问题：

https://www.npmjs.com/package/ignore-styles

加入：

mocha--require ignore-styles

测试脚本并解决了问题。

谢谢@eblin

Answer 3

您可以尝试扩展您的配置以包含以下内容：

export default {
  resolve: {
    extensions: ['', '.css', '.scss', '.js']
  },
  ...
}

Answer 4

问题解决了。

将sass-loader从0.5.0更新到3.2.0，并调整了webpack.config文件。见下文，更新的package.json和webpack.config。允许我使用bootstrap和react-toolbox样式。

的package.json

{
  "name": "pluralsight-redux-starter",
  "version": "1.0.0",
  "description": "Starter kit for React and Redux Pluralsight course by Cory House",
  "author": "Cory House",
  "license": "MIT",
  "//": "alternative for this include gulp and grunt",
  "scripts": {
    "//": "react specific library, you can use redux with other libraries as well, like angular etc...",
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src": "babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test": "mocha --require ignore-styles --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "prebuild": "npm-run-all clean-dist test link build:html",
    "build": "babel-node tools/build.js",
    "postbuild": "babel-node tools/distServer.js"
  },
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "css-loader": "^0.23.1",
    "jquery": "2.2.3",
    "minimatch": "^3.0.2",
    "node-sass": "^3.8.0",
    "react": "15.1.0",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "react-toolbox": "^1.0.1",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "resolve-path-webpack-plugin": "^1.1.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.1",
    "toastr": "2.1.2",
    "webpack-validator": "^2.2.0"
  },
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "4.13.4",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "ignore-styles": "^4.0.0",
    "jsdom": "8.5.0",
    "mocha": "2.4.5",
    "nock": "8.0.0",
    "normalize.css": "^4.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "postcss-loader": "0.8.2",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.0",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "sass-loader": "^3.2.0",
    "style-loader": "0.13.1",
    "toolbox-loader": "0.0.3",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/coryhouse/pluralsight-redux-starter"
  }
}

webpack.config.dev.js

import webpack from 'webpack';
import path from 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const modulesPath = path.join(__dirname, 'node_modules');
const autoprefixer = require('autoprefixer');

  export default {
      debug: true,
      devtool: 'source-map',
      noInfo: false,
      entry: [
          'eventsource-polyfill', // necessary for hot reloading with IE
          'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
          './src/index.js'
      ],
      target: 'web',
      output: {
          path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
          publicPath: '/',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './src'
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin()

      ],
      resolve: {
        extensions: ['', '.css', '.scss', '.js', '.json'],
        modulesDirectories: ['node_modules']
      },
      postcss: [autoprefixer],

      toolbox: {
        theme: path.join(__dirname, 'src/styles/variables.scss')
      },
      // Tells webpack the types of files that we want it to handle.
      module: {
          loaders: [
              {test: /(\.js|\.jsx)$/,
                include: path.join(__dirname, 'src'),
                loaders: ['babel']
              },
              {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass'],
                exclude: /(node_modules)\/react-toolbox/
              },
              {
                test    : /(\.scss|\.css)$/,
                include : /(node_modules)\/react-toolbox/,
                loaders : [
                  require.resolve('style-loader'),
                  require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
                  require.resolve('sass-loader') + '?sourceMap', 'toolbox'
                ]
              },
              {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
              {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
              {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
              {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
          ]

      }
  };