score:0
just use the less plugin and declare them properly...
// webpack file
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
// i have to add the regex .*? because some of the files are named like... fontello.woff2?952370
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/,
loader: 'url?limit=50000'
}
// less file
@import '~bootstrap/less/bootstrap';
i am still working on the js but i will let you know soon :-)
score:8
you need to do the following things to make it work:
- in your webpack config file,
resolve
section, make sure your bootstrap css file path is included.
as an example:
var bootstrappath = path.join(
__dirname,
'development/bower_components/bootstrap/dist/css'
);
then in your webpack config object:
resolve: {
alias: {
jquery: path.join(__dirname, 'development/bower_components/jquery/jquery')
},
root: srcpath,
extensions: ['', '.js', '.css'],
modulesdirectories: ['node_modules', srcpath, commonstylepath, bootstrappath]
}
- make sure you have style loader and css loader. e.g.
loaders:[{ test: /\.css$/, loader: "style-loader!css-loader" }]
- use it in your js file
require('bootstrap.min.css');
Source: stackoverflow.com
Related Query
- How to import CSS modules with Typescript, React and Webpack
- Webpack import bootstrap .js and .css
- import CSS and JS files using Webpack
- Webpack use both css module and import entire css file
- import css does not work for class name with dashes for Webpack 5 and css loader 5
- How to import npm module css as global with webpack and typescript?
- How to include bootstrap css and js in reactjs app?
- Remove unused css with React and Webpack
- reactjs, bootstrap and npm import - jQuery is not defined
- Webpack check file exist and import in condition
- Import and read the contents of a CSS file as text (React/webpack)
- Using Jquery and Bootstrap with Es6 Import for React App
- How do I configure webpack to run bootstrap and sass?
- CSS Code Splitting with Webpack 2 and React Router
- Minify/Mangle CSS Classnames in JSX and CSS output from Webpack (or other programmatic means)
- Webpack css setup and best practise
- In React how to import only needed Bootstrap styles. Bootstrap css modules?
- Next.js and Webpack inline Javascript or CSS ressources
- Import css and sass files nextjs 7
- Unexpected token when trying to load css with webpack and babel
- Import fonts to react project with webpack and styled components
- Using external styles and multiple class names with webpack css loader
- Import css files and react components in a create-react-app application?
- How to import CSS file on Isomorphic React - Webpack
- Using modular CSS with Bootstrap 4 and React
- webpack and react recognise css class names
- How can I format my CSS and Bootstrap so that only certain elements wrap when page width decreases?
- Using Grommet with ReactJS webpack and scss import Issue
- How can I build a React app with Webpack and import an assets folder?
- How to determine the order of css in my create react app build with webpack and customize-cra?
More Query from same tag
- How to fix problem: TypeError: self.env.emit is not a function?
- how to get array kets on selecting value from react search auto select
- React, getting Uncaught TypeError: Cannot read properties of null (reading "useRef") while using React Router Dom
- How can I refetch() my Query only when new subscription data arrives?
- Session is not stored in post request but stored in get request in Flask
- okta-auth-js Uncaught TypeError: Super expression must either be null or a function
- Error is : 'TypeError: Cannot read property 'uid'' but its define
- Receiving prop in Material UI and conditional rendering
- Detect if state updates are batched in React Hooks?
- How do I get the value I want?
- Issue with states - was working but now returns an inscrutable error
- How to load a page with the data from a component in react
- After setting initial state, click on update function getting same value
- In react, trouble passing onClick from Marker in Google Maps to app.js
- Cannot assign "OrderedDict()...: "..." must be a "..." instance
- Attempting to render Firebase Auth user details through this.setState in React app undefined
- radio buttons in react, ignore null value
- Lodash - how to pick only one item at a time from nested json?
- Can't get data from simple json file in React
- Putting a value from a method into a property array
- What is inline-rendering in React router and how does it work with "render" inside a route/
- State Keeps Refreshing Hundreds of Times, Even With useEffect
- MUI Input doesn't allow oninput attribute
- Stripe parameter_invalid_integer
- React/Webpack 4: Advice needed, best practice for loading svgs selectively from a folder
- react native PushNotificationIOS doesn't listen push notification
- Facing item width issue while arranging multiple items in a div
- How to select all text in input with Reactjs, when it focused?
- How can I pass multiple props in a single event handler in ReactJS?
- React Bootstrap using Nav component refreshes the app