pb vusjs + webpack + bootstrap-sass

Par nlefebvre, il y a 9 ans

Javascript

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

Maenhyr, il y a 9 ans

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.

nlefebvre, il y a 9 ans

Oui mais pourquoi il distribut bien le reste du sass ?

Maenhyr, il y a 9 ans

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.