首页 \ 问答 \ 使用.Net Core Angular Template中的webpack编译bootstrap scss(Compiling bootstrap scss with webpack in .Net Core Angular Template)

使用.Net Core Angular Template中的webpack编译bootstrap scss(Compiling bootstrap scss with webpack in .Net Core Angular Template)

 我试图使用bootstrap scss文件而不是css文件，所以我可以覆盖引导变量。 我可以使用css文件加载样式但不使用scss文件。 我是在从Visual Studio 2017 Angular模板创建的.NET Core Angular项目中这样做的。 
 

 我在这里尝试了答案，但没有运气。 
 

 Spa模板.net核心2.0角4 webpack 2使用sass而不是boostrap 4 css 
 

 以下是我对它应该如何工作的理解： 
 

     
 
  •  webpack.config.vendor.js文件生成vendor.js和vendor.css。 我知道vendor.js与main-client.js是分开的，所以它只需要在供应商依赖关系发生变化时构建，改进构建过程并且只在生产发布需要时进行缓存破坏。 
    •  
 
  •  在我想编译bootstrap的scss文件而不是使用他们的css文件的场景中，我希望webpack.config.vendor.js中的bootstrap.css引用应该被删除，而是将一个scss规则添加到webpack.config.js 。 
    •  
 
  •  Webpack.config.js生成一个main-client.js文件，其中包含角度组件所需的所有js代码。 通过在配置中包含scss规则，它还应该将bootstrap scss文件编译为通过javascript在html头中注入的样式。 
    •  
 
  •  我的应用程序中的styles.scss文件由webpack.config.js处理，并且应该有@import“~bootstrap / scss / bootstrap”，以便构建引导程序scss文件。 最后我还会导入我自己的_custom.scss文件，我覆盖变量。 
    •  

 

 我的理解是否正确？ 
 

 另外，除了我的style.scss文件（已经导入bootstrap.scss）之外，我不知道是什么让webpack.config.js处理node-modules文件夹下的bootstrap scss文件。 这是我需要在webpack.js中定义的吗？ 
 

 这是我的webpack.config.js。 scss规则直接来自bootstrap文档。 
 

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /\.(scss)$/,
                    use: [{
                        loader: 'style-loader', // inject CSS to page
                    }, {
                        loader: 'css-loader', // translates CSS into CommonJS modules
                    }, {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    }, {
                        loader: 'sass-loader' // compiles SASS to CSS
                    }]
                },
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
                // In case you imported plugins individually, you must also require them here:
                //Util: "exports-loader?Util!bootstrap/js/dist/util",
                //Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new AotPlugin({
                    tsConfigPath: './tsconfig.json',
                    entryModule: path.join(__dirname, 'ClientApp/app/app-browser.module#AppModule'),
                    exclude: ['./**/*.server.ts']
                })
            ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app-server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

 

 这是我的webpack.config.vendor.js。 我已经注释掉了bootstrap / dist / css / bootstrap.css 
 

//Run from Command Line: webpack --config webpack.config.vendor.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    //'bootstrap/dist/css/bootstrap.css',
    'ag-grid/dist/styles/ag-grid.css',
    'ag-grid/dist/styles/ag-theme-blue.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: ['.js'] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            // To keep development builds fast, include all vendor dependencies in the vendor bundle.
            // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        entry: { vendor: allModules.concat(['aspnet-prerendering']) },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }]
        },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}


I am attempting to use the bootstrap scss files instead of the css file so I can override the bootstrap variables. I can get the styles to load using the css file but not using scss files. I am doing so in a .NET Core Angular project created from the Visual Studio 2017 Angular template.
 

I have tried the answers here but have had no luck.
 

Spa template .net core 2.0 angular 4 webpack 2 use sass not boostrap 4 css
 

Here is my understanding of how it should work:
 

     
 
  • The webpack.config.vendor.js file generates vendor.js and vendor.css. I understand vendor.js is kept separate from main-client.js so that it only needs to be built when the vendor dependencies change, improving the build process and only doing cache busting when needed for production publishes.
    •  
 
  • In the scenario where I want to compile bootstrap's scss files instead of using their css files, I expect that the bootstrap.css reference in webpack.config.vendor.js should be REMOVED and instead a scss rule is added to webpack.config.js.
    •  
 
  • Webpack.config.js generates a main-client.js file that includes all the js code needed for the angular components. And by inluding the scss rule in the config, it should also compile the bootstrap scss files into styles that are injected in the html header via javascript.
    •  
 
  • A styles.scss file in my app is processed by webpack.config.js and should have @import "~bootstrap/scss/bootstrap" so that the bootstrap scss files are built. Ultimately I would also import my own _custom.scss file where I override the variables.
    •  

 

Is my understanding correct?
 

Also, I don't know what keeps webpack.config.js from processing the bootstrap scss files under the node-modules folder in addition to my style.scss file (which already imports bootstrap.scss). Is that something I need to define in webpack.js?
 

Here is my webpack.config.js. The scss rule is straight from the bootstrap documentation.
 

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /\.(scss)$/,
                    use: [{
                        loader: 'style-loader', // inject CSS to page
                    }, {
                        loader: 'css-loader', // translates CSS into CommonJS modules
                    }, {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    }, {
                        loader: 'sass-loader' // compiles SASS to CSS
                    }]
                },
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
                // In case you imported plugins individually, you must also require them here:
                //Util: "exports-loader?Util!bootstrap/js/dist/util",
                //Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new AotPlugin({
                    tsConfigPath: './tsconfig.json',
                    entryModule: path.join(__dirname, 'ClientApp/app/app-browser.module#AppModule'),
                    exclude: ['./**/*.server.ts']
                })
            ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app-server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

 

Here is my webpack.config.vendor.js. I have commented out bootstrap/dist/css/bootstrap.css
 

//Run from Command Line: webpack --config webpack.config.vendor.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    //'bootstrap/dist/css/bootstrap.css',
    'ag-grid/dist/styles/ag-grid.css',
    'ag-grid/dist/styles/ag-theme-blue.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: ['.js'] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            // To keep development builds fast, include all vendor dependencies in the vendor bundle.
            // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        entry: { vendor: allModules.concat(['aspnet-prerendering']) },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }]
        },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}


原文：https://stackoverflow.com/questions/47762253
更新时间：2023-03-31 12:03

最满意答案

 smali / baksmali是dex格式的汇编程序/反汇编程序对。 Baksmali接受一个dex文件并生成人类可读的程序集，smali接受人类可读的程序集并生成一个dex文件。 
 

 Apktool是一个更通用的解包和重新打包apk。 它实际上在引擎盖下使用smali / baksmali来组装/反汇编dex文件。 它还将二进制资源和二进制xml文件解包回标准文本格式等。 

smali/baksmali are an assembler/disassembler pair for the dex format. Baksmali takes a dex file and produces human readable assembly, and smali takes the human readable assembly and produces a dex file.
 

Apktool is a more general took for unpacking and repacking an apk. It actually uses smali/baksmali under the hood in order to assemble/disassemble the dex file. It also unpacks the binary resources and binary xml files back into the standard textual format, etc.

相关问答

更多

  • apktool使用教程是怎样的？[2023-07-19]

    一．APKTOOL使用环境配置 1.安装JAVA并设置环境变量。 下载安装都很简单，关键是安装完后还需要亲自设置环境变量以方便其他程序能够条用JAVA。 以WIN7为例，在桌面上右键点击计算机——>属性——>高级系统设置——>环境变量——>在下边的系统变量里新建一个变量，变量名为JAVA_HOME，值为JAVA的安装路径，比如我的是H:\ProgramFiles\Java\jdk1.6.0_26 二．APKTool的安装 1.其实这个谈不上安装，不过如果你愿意的话可以把下载到的APKTOOL中的三个文件（a ...

  • 如何使用库项目工作apktool？(How to work apktool build with library project?)[2021-09-25]

    这是apktool v1（1.5.3）的问题。 有几种方法可以解决它。 1.编辑styles.xml。 将空的“父”属性添加到错误行上的标记。 例如： 之前 59: