Comments (18)
@jpcmf it's in the linked PR to this issue #132
from bootstrap-stylus.
I haven't tried it with Webpack yet but try adding the Bootstrap directory to your Stylus path instead of using it as a plugin:
module.exports = {
...
module : {
loaders: [
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
{ test: /\.css$/, loader: 'style!css' },
]
}
stylus: {
paths: ['node_modules/bootstrap-styl'],
},
}
Then you can just import in your Stylus files as normal: @import 'bootstrap/buttons'
from bootstrap-stylus.
Look like it doesnt care about paths
option
ERROR` in ./~/css-loader!./~/stylus-loader!./client/app/common/navbar/navbar.styl
Module build failed: Error: c:\projet\NG6-starter-master\client\app\common\navbar\navbar.styl:2:9
1| @import '../common'
2| @import 'bootstrap/buttons'
--------------^
3|
4| .navbar
5| height $navbarHeight
failed to locate @import file bootstrap/buttons.styl
Until now only the use
resolve the bootstrap path correctly, but doesnt parse it.
I'm still in a heavy lurning step on Webpack, so I feel that it's about telling the loader to get Bootstrap files into the render step, but I dont know how...
from bootstrap-stylus.
Looking at the docs for stylus-loader, this should do it:
{ test: /\.styl$/, loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-styl' }
from bootstrap-stylus.
Yes I tried this, but it has the same effect than the use
option.
I will ask stylus-loader
some support and will let you know if I have some news about it.
Thx @kane-c for your current support !
from bootstrap-stylus.
No worries. Good luck!
from bootstrap-stylus.
same problem,
ERROR in .//css-loader!.//stylus-loader!.
need help
from bootstrap-stylus.
@kane-c Did your source map generate correctly?
webpack-contrib/stylus-loader#156
from bootstrap-stylus.
any luck on this?
from bootstrap-stylus.
any luck on this +1?
from bootstrap-stylus.
We'll accept a PR if someone wants to take this on and it requires a fix in the bootstrap-stylus repo.
The new company I work for is using another framework so I haven't been able to test this against modern build tools.
from bootstrap-stylus.
I managed to make it work with a small workaround:
https://github.com/daniloprates/thin-starter
main.styl
$icon-font-path = "~bootstrap-styl/fonts/"
@import 'bootstrap';
webpack.config.js
var bootstrap = require('bootstrap-styl');
module.exports = {
entry: {
a: './src/scripts/main.js',
b: './src/style/main.styl'
},
(...)
stylus: { use: [bootstrap()] },
(...)
};
loaders
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=node_modules/bootstrap-styl/fonts/[name].[ext]'
}
from bootstrap-stylus.
I put together my webpack sample and configured it for source maps.
They nearly worked, but I ran into this bug with stylus-loader where the browser knows the Stylus file and line but trying to view it just shows a file with null
as the contents.
Has anyone been able to get source maps working properly?
from bootstrap-stylus.
@kane-c adding the query parameter as you suggested worked for me, hope to anyone works to, here's my webpack.config.js
module: {
// rules for modules (configure loaders, parser options, etc.)
rules: [
{
test: /\.html$/,
exclude: [/node_modules/],
use: [
{
loader: 'html-loader',
options: {
minimize: true
}
}
]
},
{
test: /\.js?$/,
exclude: [/node_modules/],
use: ['ng-annotate-loader', 'babel-loader']
},
{
test: /\.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader']
},
{
test: /\.styl$/,
exclude: [/node_modules/],
use: [
'style-loader',
'css-loader',
'stylus-loader?paths=node_modules/bootstrap-styl'
]
},
{
test: /\.(svg|woff|woff2|ttf|eot|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader?name=src/assets/css/fonts/[name].[hash].[ext]'
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader?name=src/assets/img/[name].[ext]'
}
]
}
]
}
from bootstrap-stylus.
I have submitted a PR for this, tested and working on my webpack configuration.
from bootstrap-stylus.
Can you share the solution @lightbringer1991 ?
from bootstrap-stylus.
When will #132, #133 be merged? nice done.
from bootstrap-stylus.
Is there a solution that works with Webpack 4?
from bootstrap-stylus.
Related Issues (20)
- Conflicting module names HOT 9
- @require mixins in modules for better dependency management HOT 2
- @extend .clearfix in mixins HOT 3
- Invalid import path in index.styl HOT 10
- Block-grid for Bootstrap HOT 5
- Failed to locate @import file bootstrap/variables.styl HOT 3
- Why imported paths have "bootstrap" folder? HOT 4
- Import font files HOT 1
- navbar build fails HOT 5
- Tag v3.3.6 ?
- index.styl suppose under root? HOT 14
- How would i go about adding a XL grid breakpoint with this? HOT 2
- Is the relative path in `index.styl` wrong? HOT 3
- Make it possible to deploy to Webjars HOT 1
- Question: which files just for the Bootstrap grid? HOT 3
- Error with Webpack Can't resolve '../fonts/glyphicons HOT 7
- Webpack's CSS Module and PostCSS loaders underisbly applied on Bootstrap as well
- Index.sty failed to locate imports HOT 1
- bootstrap 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-stylus.