blocks|key|2702941|text|这个模板似乎没有使用sass-loader，也没有寻找.scss文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2702942|所以首先要安装npm+i+sass-loader+--save|2702943|然后，在webpack配置中的loaders部分下，您应该添加如下内容：|2702944|webpack.config.js|2702945|var+path+=+require('path');
var+nodeModules+=+path.resolve(path.join(__dirname,+'node_modules'));
//+this+is+the+entire+config+object
const+config+=+{
++++//+...
++++loaders:+[
++++++++//+...
++++++++{
++++++++++++test:+/\.(css%7Cscss)$/,
++++++++++++include:+[
++++++++++++++++path.join(nodeModules,+'bootstrap'),
++++++++++++],
++++++++++++loaders:+["style",+"css",+"sass"]
++++++++}
++++]
++++//+...
};|code-block|syntax|javascript|2702946|现在，如果你想使用bootstrap的.scss变量，你可以这样做：|2702947|styles/app.scss|2702948|$brand-warning:+pink+!default;
@import+'~bootstrap/scss/bootstrap.scss';|2702949|然后在你的main.js中放入样式导入|2702950|import+"styles/app.scss";|2702951|另外，我应该提一下，这看起来非常接近this+answer|2702952|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jtangelder/sass-loader|1|https://stackoverflow.com/questions/35542283/how-do-i-configure-webpack-to-run-bootstrap-and-sass^0|R|5|A|B|0|0|7|O|0|0|0|H|0|0|J|5|0|0|F|0|0|5|7|0|0|I|B|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|F|3|G|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1L|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1P|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|U|3|V|5|N|7|1W|8|@]|D|@]|E|$O|P]]|$1|W|3|X|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|N|7|20|8|@]|D|@]|E|$O|P]]|$1|10|3|11|5|6|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|12|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]]]

<p>Seems like the boilerplate doesn't use <a href="https://github.com/jtangelder/sass-loader" rel="nofollow noreferrer">sass-loader</a>, and doesn't look for <code>.scss</code> files.</p>

<p>So first off install <code>npm i sass-loader --save</code> </p>

<p>Then under the loaders part in the webpack config you should add something like this:</p>

<p><code>webpack.config.js</code></p>

<pre><code>var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};
</code></pre>

<p>Now, if you want to play around with bootstrap's <code>.scss</code> variables, you can do so like this:</p>

<p><code>styles/app.scss</code> </p>

<pre><code>$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';
</code></pre>

<p>and in your <code>main.js</code> put in the style import </p>

<pre><code>import "styles/app.scss";
</code></pre>

<p>Also, I should mention, this seems very close to <a href="https://stackoverflow.com/questions/35542283/how-do-i-configure-webpack-to-run-bootstrap-and-sass">this answer</a></p>


blocks|key|2492901|text|现在你切换到了反应弹弓，而webpack已经为sass做好了准备，这里就少了几步。从原始样板文件中，添加带有npm的bootstrap+4，就像您已经做的那样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2492902|npm+install+bootstrap@4.0.0-alpha.3+--save|code-block|syntax|javascript|2492903|然后在src/style/styles.scss中添加两个导入|2492904|@import+"./bootstrap-custom";
@import+"~bootstrap/scss/bootstrap";|2492905|这基本上和@DanielDubovski向你展示的一样，但是有一个单独的bootstrap覆盖文件更传统一些，而且你不再需要默认设置，因为你计划覆盖bootstrap默认设置，并且你可能不想意外地覆盖你的自定义引导程序颜色。要开始使用src/style/bootstrap-custom.scss，可以进入node_modules/bootstrap/scss/_variables.scss并查看默认变量的完整列表。然后，可以复制出要更新的变量名。下面是一个bootstrap-custom.scss示例，它只是覆盖了灰度颜色：|2492906|/*
+*+overrides+for+bootstrap+defaults,+you+can+add+more+here+as+needed,++++see+node_modules/bootstrap/scss/_variables.scss+for+a+complete+list
+*/

+$gray-dark:+++++++++++++++++#333;
+$gray:++++++++++++++++++++++#777;
+$gray-light:++++++++++++++++#000;
+$gray-lighter:++++++++++++++#bbb;
+$gray-lightest:+++++++++++++#ddd;|2492907|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps.  From the raw boilerplate, add bootstrap 4 with npm as you already did:</p>

<pre><code>npm install bootstrap@4.0.0-alpha.3 --save
</code></pre>

<p>Then in src/styles/styles.scss you want to add a couple imports</p>

<pre><code>@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";
</code></pre>

<p>This is essentially the same thing as @DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables.  You can then copy out the variable names that you want to update.  Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:</p>

<pre><code>/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;
</code></pre>


blocks|key|2492909|text|npm+install+--save-dev+sass-loader+css-loader+style-loader+node-sass|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2492910|在您的webpack.config.js上：|unstyled|2492911|+loaders:+[
+++++{
+++++++++test:+/\.scss$/,
+++++++++loaders:+[+'style',+'css',+'sass'+]
+++++}
+]|2492912|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>npm install --save-dev sass-loader css-loader style-loader node-sass
</code></pre>

<p>on your webpack.config.js:</p>

<pre><code> loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]
</code></pre>


blocks|key|2492914|text|首先，你需要为scss下载合适的加载器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2492915|安装sass-loader|2492916|npm+install+sass-loader+--save-dev|offset|length|style|CODE|2492917|然后，您需要配置您的webpack测试所有scss文件，以便它可以处理它。这就是它是如何完成的|2492918|{test:+/\.scss$/,+loaders:+[+'style',+'css',+'sass'+]}|code-block|syntax|javascript|2492919|如果你得到了关于node-sass的错误|2492920|如果出现错误，如无法解析node-sass，则安装|2492921|npm+i+node-sass+--save-dev|2492922|现在，如果您导入bootstrap.scss，webpack将为您捆绑|2492923|import+"bootstrap/scss/bootstrap.scss"|2492924|如何进行自定义|2492925|示例位于您自己的scss文件中|2492926|$btn-font-weight:bold;|2492927|然后导入要覆盖的组件或整个bootstrap.scss|2492928|@import+'~bootstrap/scss/bootstrap.scss';|2492929|在我的例子中是style.scss|2492930|$btn-font-weight:bold;
@import+'~bootstrap/scss/bootstrap.scss';|2492931|main.js|2492932|import+"bootstrap/scss/bootstrap.scss"
import+"./style.scss"|2492933|希望这能帮助你实现你的目标！|2492934|我已经创建了一个演示应用程序here|2492935|运行npm+install，npm+start转到localhost:8080|2492936|entityMap|0|LINK|mutability|MUTABLE|url|https://bitbucket.org/jorawarsingh/es6-bootstrap4^0|0|0|0|Y|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|E|4|0|0|2|B|E|9|P|E|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1Y|8|@$F|1Z|G|20|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|21|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|22|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|24|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|25|8|@]|9|@]|A|$O|P]]|$1|W|3|X|5|6|7|26|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|N|7|27|8|@]|9|@]|A|$O|P]]|$1|10|3|11|5|6|7|28|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|29|8|@]|9|@]|A|$]]|$1|14|3|15|5|N|7|2A|8|@]|9|@]|A|$O|P]]|$1|16|3|17|5|6|7|2B|8|@]|9|@]|A|$]]|$1|18|3|19|5|N|7|2C|8|@]|9|@]|A|$O|P]]|$1|1A|3|1B|5|6|7|2D|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|N|7|2E|8|@]|9|@]|A|$O|P]]|$1|1E|3|1F|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|N|7|2G|8|@]|9|@]|A|$O|P]]|$1|1I|3|1J|5|6|7|2H|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|2I|8|@]|9|@$F|2J|G|2K|1|2L]]|A|$]]|$1|1M|3|1N|5|6|7|2M|8|@$F|2N|G|2O|H|I]|$F|2P|G|2Q|H|I]|$F|2R|G|2S|H|I]]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]]|1P|$1Q|$5|1R|1S|1T|A|$1U|1V]]]]

<h2>First of all you need to download proper loader for scss</h2>

<p>Install sass-loader</p>

<p><code>npm install sass-loader --save-dev</code></p>

<p>Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done</p>

<pre><code>{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}
</code></pre>

<h2>If you got error regarding node-sass</h2>

<p>If you got error like cannot resolve node-sass then install</p>

<pre><code>npm i node-sass --save-dev
</code></pre>

<h2>Now if you import bootstrap.scss webpack will bundle it for you</h2>

<pre><code>import "bootstrap/scss/bootstrap.scss"
</code></pre>

<h2>How to customize it</h2>

<p>Example in your own scss file</p>

<pre><code>$btn-font-weight:bold;
</code></pre>

<p>and then import the component you want to override or the whole bootstrap.scss</p>

<pre><code>@import '~bootstrap/scss/bootstrap.scss';
</code></pre>

<h2>In my case style.scss</h2>

<pre><code>$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';
</code></pre>

<h2>main.js</h2>

<pre><code>import "bootstrap/scss/bootstrap.scss"
import "./style.scss"
</code></pre>

<h2>Hope this help you to achieve your goal!</h2>

<h2>I have created a demo app <a href="https://bitbucket.org/jorawarsingh/es6-bootstrap4">here</a></h2>

<p>run <code>npm install</code> 
and <code>npm start</code>
got to <code>localhost:8080</code></p>


blocks|key|32059|text|不是OP的原始框架(但那是几年前的事了)。从react-scripts@2.0.0开始，它已经内置了SCSS编译功能。因此，如果您在任何新项目中使用它，那么导入它就足够简单了：https://facebook.github.io/create-react-app/docs/adding-bootstrap|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|32060|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/create-react-app/docs/adding-bootstrap^0|M|J|2G|1T|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Not the OP's original framework (but that was a few years back). As of <code>react-scripts@2.0.0</code> it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: <a href="https://facebook.github.io/create-react-app/docs/adding-bootstrap" rel="nofollow noreferrer">https://facebook.github.io/create-react-app/docs/adding-bootstrap</a></p>


<p>i'm starting a new project using reactjs ES6 and webpack</p>

<p>using <a href="https://github.com/kriasoft/react-static-boilerplate" rel="noreferrer">react-static-boilerplate starter</a> question is how can i import bootstrap4 into the build proccess ?</p>

<p>i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its @variables and apply my theme etc.</p>

<p>i started project by cloning boilerplate</p>

<pre><code>&gt; git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
&gt;cd MyApp &amp;&amp; npm install
</code></pre>

<ol start="2">
<li><p>installed bootstrap using npm</p>

<p>npm install bootstrap@4.0.0-alpha.3</p></li>
</ol>

<p>now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?</p>


how to setup bootstrap 4 scss with react webpack

我正在使用reactjs ES6和webpack开始一个新项目使用的问题是如何将bootstrap4导入到构建过程中？我不想使用bootstrap.css生成的文件，相反，我想让webpack为我构建它，这样我就可以更改它的@variables并应用我的主题等。我通过克隆样板启动了项目> git clone -o re...

问如何用react设置bootstrap 4 scss
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用react设置bootstrap 4 scssEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用react设置bootstrap 4 scss
EN