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

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

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

    我现在用 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
    jeremaihloo
        1
    jeremaihloo  
       2016-06-29 15:35:04 +08:00 via Android
    相对路径难道不是../吗
    eromoe
        2
    eromoe  
    OP
       2016-06-29 15:37:37 +08:00
    @jeremaihloo 文件夹和 main.scss 同层。。。
    jeremaihloo
        3
    jeremaihloo  
       2016-06-30 20:26:02 +08:00
    @eromoe 看歪了。。尴尬
    lovelypig5
        4
    lovelypig5  
       2016-07-07 19:18:06 +08:00
    @import './font-awesome/font-awesome.scss';
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   887 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:43 · PVG 05:43 · LAX 13:43 · JFK 16:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.