首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
拉勾
V2EX  ›  webpack

怎么在 webpack devserver 里 用相对路径 import scss(font-awesome)?

  •  
  •   eromoe · 2016-06-29 14:45:37 +08:00 · 3228 次点击
    这是一个创建于 994 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我现在用 webpack devserver 搞个 react 的东西

    结构如下

    怎么能在 main.scss import 相对路径 的 scss 文件?

    @import 'font-awesome/font-awesome.scss'; 一旦写进去, webpack devserver 就开始报错了, 只有放到 index.js 里 import 才行

    so 上也有类似问题 http://stackoverflow.com/questions/33649761/how-do-i-load-font-awesome-using-scss-sass-in-webpack-using-relative-paths

    没有解决办法

    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 都没啥用。。。

    4 回复  |  直到 2016-07-07 19:18:06 +08:00
        1
    jeremaihloo   2016-06-29 15:35:04 +08:00 via Android
    相对路径难道不是../吗
        2
    eromoe   2016-06-29 15:37:37 +08:00
    @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';
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2980 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 10:56 · PVG 18:56 · LAX 03:56 · JFK 06:56
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1