目前,我正在尝试使用Webpack3加载我的scss文件和font-awesome。
这是我的webpack.config.js
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'./Scripts/app.ts',
'./Scripts/scss/main.scss',
//'font-awesome/scss/font-awesome.scss',
'tether'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './Scripts/dist')
},
module: {
rules: [
{
loader: 'ts-loader',
test: /\.ts$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000'
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=images/[name].[ext]',
'image-webpack-loader?bypassOnDebug'
]
},
// font-awesome
{
test: /font-awesome\.config\.js/,
use: [
{ loader: 'style-loader' },
{ loader: 'font-awesome-loader' }
]
},
// Bootstrap 4
{
test: /bootstrap\/dist\/js\/umd\//,
use: 'imports-loader?jQuery=jquery'
},
// SCSS pre-processing
{
test: /\.(scss)$/,
//use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: [
// // the order of the loaders cannot be changed
// {
// loader: 'css-loader',
// options: { minimize: false } // minifize css file
// }, // translates CSS into CommonJS modules
// {
// loader: 'postcss-loader', // Run post css actions
// options: {
// // post css plugins, can be exported to postcss.config.js
// plugins() {
// return [precss, autoprefixer];
// }
// }
// },
// { loader: 'sass-loader' } // compiles SASS to CSS
// ]
//})
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new ExtractTextPlugin('main.css', {
allChunks: true
}),
// minify the bundled js files
new webpack.optimize.UglifyJsPlugin({
include: /\.js$/,
minimize: true,
sourceMap: true
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
jquery: 'jquery',
$: 'jquery',
tether: 'tether',
Tether: 'tether',
Popper: ['popper.js', 'default'],
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: 'exports-loader?Util!bootstrap/js/dist/util'
})
],
devtool: 'source-map'
};
更多细节(基于.scss的规则):
$fa-font-path: "~/node_modules/font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';
字体和图标是对“node_moduldes”中的包的引用(这不是我想要的生产)
构建工件只是bundle.js
如果我运行webpack,似乎一切正常。但是,一旦我们转向生产,我假设与node_module的图标/字体链接将被破坏。
这是我的scss:
如果我使用已注释掉的代码,可以正确加载font-awesome,但不能加载我的scss文件。
细节:
我的问题:
有没有什么方法可以用所有工件加载font-awesome并使用Webpack 3正确加载我的scss组件(如生产)?
提前致谢。
答案 0 :(得分:1)
我花了一些时间努力寻找更好的解决方案。这是我的方法,它按预期工作:
我引用了两个资源:
我希望强调一些事情:
webpack提供了一种解决文件的高级机制。该 sass-loader使用node-sass'自定义导入功能可以通过所有 查询webpack解析引擎。因此,您可以导入您的Sass node_modules中的模块。只需在它们前面添加一个〜来告诉webpack 这不是相对重要的:
@import" ~bootstrap / dist / css / bootstrap&#34 ;;
重要的是只用〜前缀,因为〜/解析为 主目录。 webpack需要区分bootstrap和 ~bootstrap,因为CSS和Sass文件没有特殊的语法 导入相关文件。写@import"文件"是相同的 @import" ./ file&#34 ;;
来自https://github.com/webpack-contrib/sass-loader
所以这是我的main.scss文件:
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~inputmask/css/inputmask.css';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
// import partials
@import "variables";
@import "mixins";
@import "accordion";
@import "buttons";
@import "cards";
@import "container";
@import "errors";
@import "fonts";
@import "form";
@import "headers";
@import "hyperlinks";
@import "tables";
@import "warnings";
@import "wcb-footer";
@import "wcb-header";
@import "asmt-report"; // optional