Question

TL; DR，font-awesome css无法在我的博客上正确显示，因为我不仅可以为字体真棒css和my blog online address 以及github address制作网址。

我在github页面上创建了一个博客，用pug转换html，手写笔转换CSS，小ts，webpack + gulp构建，一切正常，但是真棒css url是错误的，我使用{{1} }和webpack-2。

关于webpack中令人敬畏的css的配置是

gulp-4

博客文件结构

...
  output: {
    path: PATHS.bin,
     //publicPath: '{{site.baseurl}}',
   // use / to show awesome css icon
    publicPath: '/',
    filename: debug ? 'js/[name].js' : 'js/[name]-[hash:8].js'
  },
...

...
  module: {
    rules: [
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use:[{ loader: 'url-loader',
          options: {
            limit:'10000',
            mimetype:'application/font-woff',
            //name:'fonts/[name].[ext]?[hash:8]'
            name:'fonts/[name].[ext]?[hash:8]'
          }
        } ]
      }, {

...

令人敬畏的CSS需要css中的网址为. ├── about │ └── index.md ├── _config.yml ├── credits │ └── index.md ├── css │ ├── commons.css │ ├── commons.css.map │ ├── index.css │ ├── index.css.map │ ├── pages.css │ └── pages.css.map ├── favicon.ico ├── fonts │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── Gemfile ├── Gemfile.lock ├── gulpfile.js ├── images │ └── shangwenlong-wechat.png ├── _includes │ ├── articles.html │ ├── disqus.html │ ├── pagination.html │ └── sidebar.html ├── index.html ├── Jenkinsfile ├── js │ ├── commons.js │ ├── commons.js.map │ ├── index.js │ ├── index.js.map │ ├── pages.js │ └── pages.js.map ├── jsconfig.json ├── _layouts │ ├── default.html │ ├── page.html │ └── post.html ├── LICENSE ├── media ├── node_modules ├── package.json ├── _posts │ ├── 2016-07-07-webpack-for-jekyll.md │ ├── 2016-08-13-gemfile-requires-error.md │ ├── 2016-10-07-mongoose-arrowFunction-bug.md │ ├── 2016-12-03-gulp-watch-problem.md │ ├── 2016-12-04-pug-loader-problem.md │ ├── 2016-12-05-github-pages-problem.md │ ├── 2016-12-24-min-height-does-not-work-in-qq-browser.md │ └── 2017-03-01-reactjs-improvements.md ├── README.md ├── _site │ ├── about │ ├── blog │ ├── credits │ ├── css │ ├── favicon.ico │ ├── fonts │ ├── Gemfile │ ├── Gemfile.lock │ ├── images │ ├── index.html │ ├── Jenkinsfile │ ├── js │ ├── jsconfig.json │ ├── LICENSE │ ├── page2 │ ├── README.md │ ├── src │ ├── static │ ├── test │ ├── tsconfig.json │ └── webpack.config.js ├── src │ ├── css │ ├── fonts │ ├── _includes │ ├── index.pug │ ├── js │ └── _layouts ├── static │ └── highlight ├── struct.txt ├── test │ └── index.html ├── tsconfig.json └── webpack.config.js，但它是../fonts/xxxx，因此无法正常显示。

您可以查看我是否仅为了使用/fonts/xxx的优秀css而更改了publicPath，那么其他../和js将被链接错误，但我无法创建仅适用于css的网址，不会更改其他来源。求助〜，非常感谢你。

Answer 1

只需在ExtractTextPlugin中设置publicPath，它就可以覆盖全局输出ExtractTextPlugin

  /********* stylus to css*/
  {
    test: /\.(styl|css)$/,
    exclude: ['/node_modules/','/src/css/includes/'],
    use:ExtractTextPlugin.extract({
      fallback: 'style-loader',
      publicPath: '../',
      use:['css-loader','postcss-loader','stylus-loader']
    })  
  },

不能仅为webpack 2中的url-loader特定化特定URL

1 个答案: