Bonjour,
J'ai integré vusjs + webpack + bootstrap-sass a symfony et le pb c'est qu'il me retourne :

[Thu Apr 13 20:54:03 2017] 127.0.0.1:57637 [404]: /node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
[Thu Apr 13 20:54:03 2017] 127.0.0.1:57640 [404]: /node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
[Thu Apr 13 20:54:04 2017] 127.0.0.1:57643 [404]: /node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf

voici ma conf.base:

'use strict'
const path = require('path')
const webpack = require('webpack')
const config = require('./config')

const postcss = [
  require('autoprefixer')({
    browsers: ['last 2 versions', 'ie > 8']
  }),
  require("css-mqpacker")()
]

let webpack_base = {
  entry: config.entry,
  output: {
    path: config.assets_path,
    filename: '[name].js',
    publicPath: config.assets_url
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.css', '.json'],
    alias: {
      root: path.join(__dirname, '../js'),
      components: path.join(__dirname, '../js/components'),
      vue: 'vue/dist/vue.js'
    }
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: [/node_modules/]
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: [/node_modules/,/libs/]
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loaders: ['vue']
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: [/node_modules/, /libs/]
      },
      {
        test: /\.scss$/,
        vue: 'scss',
        loaders: ['css', 'postcss', 'sass']
      },
      {
        test: /\.css$/,
        loaders: ['css', 'postcss']
      }, {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf|wav)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10,
          name: '[name].[hash:7].[ext]'
        }
      }
    ]
  },
  babel: {
    babelrc: false,
    presets: [
      'es2015',
      'stage-2'
    ],
    plugins: ["transform-runtime"]
  },
  postcss,
  vue: {
    loaders: {},
    postcss
  },
  plugins: [],
  devServer: {
    headers: { "Access-Control-Allow-Origin": "*" }
  }
}

if (config.html) {
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  webpack_base.plugins.push(
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  )
}

module.exports = webpack_base

Merci pour votre aide

3 réponses


Bonsoir,

Je dirais que le problème vient du fait que le serveur ne distribue pas le dossier node_modules. On a deux solutions :
1) distribuer node_modules.
2) copier les sources fonts dans un autre dossier et modifier le chemin dans bootstrap-sass.

Je pencherai pour la version 2.

Oui mais pourquoi il distribut bien le reste du sass ?

Il le distribue car tu as cette règle

{
    test: /\.scss$/,
    vue: 'scss',
    loaders: ['css', 'postcss', 'sass']
},

Celle ci lance la commande sass qui va compiler ton fichier sass en css. Du coup l'import de bootstrap-sass va se retrouver dans le fichier CSS compilé qui, lui, est disponible.