我现在用 webpack devserver 搞个 react 的东西
结构如下
怎么能在 main.scss import 相对路径 的 scss 文件?
@import 'font-awesome/font-awesome.scss';
一旦写进去, webpack devserver 就开始报错了,
只有放到 index.js 里 import 才行
没有解决办法
webpack 配置:
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
/**
* This is where the magic happens! You need this to enable Hot Module Replacement!
*/
new webpack.HotModuleReplacementPlugin(),
/**
* NoErrorsPlugin prevents your webpack CLI from exiting with an error code if
* there are errors during compiling - essentially, assets that include errors
* will not be emitted. If you want your webpack to 'fail', you need to check out
* the bail option.
*/
new webpack.NoErrorsPlugin(),
/**
* DefinePlugin allows us to define free variables, in any webpack build, you can
* use it to create separate builds with debug logging or adding global constants!
* Here, we use it to specify a development build.
*/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
],
module: {
loaders: [
{
test: /\.js?/,
exclude: [/node_modules/, /styles/],
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
}
};
我只懂基本的webpack配置, 尝试了下改 entry 和output 都没啥用。。。
1
jeremaihloo 2016-06-29 15:35:04 +08:00 via Android
相对路径难道不是../吗
|
2
eromoe OP @jeremaihloo 文件夹和 main.scss 同层。。。
|
3
jeremaihloo 2016-06-30 20:26:02 +08:00
@eromoe 看歪了。。尴尬
|
4
lovelypig5 2016-07-07 19:18:06 +08:00
@import './font-awesome/font-awesome.scss';
|