使用Webpack 3无法正确加载sass和font-awesome

时间:2018-04-12 18:32:14

标签: css webpack sass font-awesome

目前,我正在尝试使用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的规则):

  1. 我使用以下方法在main.scss中导入了字体很棒的scss:
  2. $fa-font-path: "~/node_modules/font-awesome/fonts";
    @import '~font-awesome/scss/font-awesome.scss';
    
    1. 字体和图标是对“node_moduldes”中的包的引用(这不是我想要的生产)

    2. 构建工件只是bundle.js

    3. 如果我运行webpack,似乎一切正常。但是,一旦我们转向生产,我假设与node_module的图标/字体链接将被破坏。

      这是我的scss:

      enter image description here

      如果我使用已注释掉的代码,可以正确加载font-awesome,但不能加载我的scss文件。

      细节:

      • 可以制作所有svg / ttf / eot文件
      • 可以将scss处理为css文件,但是当我加载页面时,它们看起来很糟糕。

      我的问题:

      有没有什么方法可以用所有工件加载font-awesome并使用Webpack 3正确加载我的scss组件(如生产)?

      提前致谢。

1 个答案:

答案 0 :(得分:1)

我花了一些时间努力寻找更好的解决方案。这是我的方法,它按预期工作:

我引用了两个资源:

  1. Using FontAwesome with Sass
  2. sass-loader:https://github.com/webpack-contrib/sass-loader
  3. 我希望强调一些事情:

    • 我们如何"导入"包。我将导入的css文件从我的TypeScript文件移动到main.scss。一切都像魅力一样。
    • 另一个重要的事情是sass-loader有@import
    • 的规则
      

    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