目前我一直在让Sass在我的React项目中工作。在我所遵循的指南中,一切正常,但是当我到达需要使用ExtractTextPlugin
中的webpack.config.js
时,它会引发错误。我的主要sass文件位于root/style.main.scss
,并包含在我的index.js
中,它在DOM中呈现我的应用:import style from '../style/main.scss';
webpack.config.js:
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'es2015',
'react'
]
}
},
{ test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" },
{ test: /\.useable\.css$/, loader: "style/useable!css" },
// sass
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true
})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
proxy: {
'/api/*': {
target: 'http://mab-cmdb.dev',
secure: false,
changeOrigin: true
}
}
},
};
编辑:webpack错误
/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25
loader: ExtractTextPlugin.extract('css!sass')
^
ReferenceError: ExtractTextPlugin is not defined
at Object.<anonymous> (/Users/jordykoppen/git/mab-cmdb-v2-frontend/webpack.config.js:25:17)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at module.exports (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/bin/convert-argv.js:80:13)
at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:62:48)
at Module._compile (module.js:409:26)
感谢您的帮助。
答案 0 :(得分:1)
您的Webpack配置缺少以下行:
var ExtractTextPlugin = require("extract-text-webpack-plugin");