Question

我正在使用Webpack开发一个React应用程序，并希望将我的SASS文件中的CSS保存在一个单独的文件中。我一直在＆＃34;错误：＆＃34; extract-text-webpack-plugin＆＃34;加载器使用没有相应的插件＆＃34;

这是我的webpack.confg.js文件的内容：

var path          = require('path');
var webpack       = require('webpack');
var debug         = process.env.NODE_ENV !== "production";
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
   context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/index.js",
   module: {
loaders: [
  {
    test: /\.js?$/,
    exclude: /(node_modules|bower_components)/,
    loader: "babel-loader",
    query: {}
  },
  {
    test: /\.scss$/,
    loader:ExtractTextPlugin.extract('css','sass')
  }
]
  },
  output: {
    path: __dirname + "/src/",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new ExtractTextPlugin('dist/main.css')
  ]
};

index.js内容

require("../sass/main.scss");

console.log('hello');

我的package.json依赖项

"dependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"history": "^4.0.1",
"node-sass": "^3.10.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-router": "^2.8.1",
"sass-loader": "^4.0.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.2"
  },
  "devDependencies": {}
 }

Answer 1

启用debug时，您没有加载任何插件：

plugins: debug ? [ /* no plugins! */ ] : [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  new ExtractTextPlugin('dist/main.css')
]

如何使用SASS设置Webpack

1 个答案: