Webpack 很灵活......如果我能让它工作就好了。我有两个文件。
- App.js
- 应用程序.scss
我想从 App.scss 导入样式并在 App.js 中使用它们
这是我的代码。
// App.js
import React, {Component} from 'react';
import s from './App.scss';
class App extends Component {
render() {
return (
<div className={s.app}>
</div>
);
}
}
console.log('what is in s ' + JSON.stringify(s));
export default App;
还有 Sass 文件。
// App.scss
.app {
width: 100%;
height: 100%;
background-color: blue;
}
控制台显示 s 是一个空对象。我希望看到 {app: ...}。
Weback是这样设置的。
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: [
'./src/client',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
loaders: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
}]
},
devServer: {
contentBase: './dist',
hot: true
}
};
webpack 没有错误。控制台中没有错误。
最佳答案
经过多次搜索,我发现了这个 Github issue 。解决方案是更改 webpack.config.js 中的这一行
loaders: ['style', 'css', 'sass']
到
loader: 'style!css?modules!sass'
关于javascript - Sass 加载器未加载样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35666266/