Question

从grunt迁移后，样式与webpack无法正常工作。所有样式都在gruntfile中连接在一起，如下所示：

target: {
    files: {
        "all.css": [
            "node_modules/bootstrap/dist/css/bootstrap.css",
            "bower_components/toastr/toastr.css",
            "bower_components/angular-ui-select/dist/select.css",
            "node_modules/font-awesome/font-awesome.css",
            "bower_components/angular-loading-bar/build/loading-bar.css",
            "bower_components/angular-ui-tree/dist/angular-ui-tree.css",
            "content/styles/awesome-bootstrap-checkbox.css",
            "content/styles/tradesolution.css",
            "content/styles/site.css",
            "content/styles/ts.css",
            "content/styles/nyKladd.css"
        ]
    }
}

我在webpack中的当前配置：

var webpack = require('webpack');
var globby = require('globby');
var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

const ConcatPlugin = require('webpack-concat-plugin');
const extractCSS = new ExtractTextPlugin('[name].css');
const extractLESS = new ExtractTextPlugin('[name].css');

module.exports = {
    entry: {
        app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
        Ztyles: globby.sync(['./content/styles/less/*.less']), 
        styles: globby.sync(['./content/styles/*.css']),
        images: globby.sync(['./content/images/**/*.*']),
        vendor: [
               // removed to save space
        ],
    },
    output: {

        filename: './scripts/[name].bundle.js',
        path: path.join(__dirname, "public")

    },
    devServer: {
        port: 1384,
        contentBase: './public/'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: (() => {
        if(NODE_ENV = "devlopment") return 'source-map'
        else return 'cheap-module-eval-source-map'
    }) (),

    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [/node_modules/]
            },
            {
                test: /\.css$/,
                loader: extractCSS.extract(
                    { fallback: 'style-loader', use: 'css-loader' }
                ),
                //'style-loader', 'css-loader'
            },
            {    test: /\.less$/,
                 use: extractLESS.extract(
                     {fallback:'style-loader', use: ['css-loader','less-loader']}
                )
                //'style-loader', 'css-loader!less-loader'
            },
            {
                test: /\.(ico)$/,
                loader: "url-loader?name=./[name].[ext]",
                include: path.resolve(__dirname, "content", "images")
            },
            {
                test: /\.(jpg|jpeg|gif|png|PNG|tiff|svg)$/,
                loader: 'file-loader?name=/[path]/[name].[ext]',
                include: path.resolve(__dirname, "content", "images"),
            },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./fonts/[name].[ext]' },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' },
            {
                test: require.resolve('adal-angular/lib/adal'),
                loader: 'expose-loader?AuthenticationContext'
            },
            {
                test: /\.js$/,
                enforce: "pre",
                loader: 'source-map-loader'
            }
        ],
    },

    plugins: [
        new webpack.DefinePlugin({
            ADMIN_API_URL: JSON.stringify('http://localhost:41118/api/'),
            API_URL: JSON.stringify('http://epdapi.tradesolution.no/'),
            GLOBAL_ADMIN_URL: JSON.stringify('https://adminapi.tradesolution.no/')
        }),
        new HtmlWebpackPlugin({
            template: './app/layout.html',
            filename: 'index.html'
        }),
        extractCSS,
        extractLESS,
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
        new ExtractTextPlugin({ filename: './[name].bundle.css' }),
        new AssetsPlugin({
            filename: 'webpack.assets.json',
            path: './public',
            prettyPrint: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
            "window.AuthenticationContext": "AuthenticationContext",
            _: 'underscore'
        }),
        new CopyWebpackPlugin([
            {from: './app/**/*.html', to: './'}
        ]),
        new DashboardPlugin()
    ],
    externals: [
        { xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
    ], 

}

从这张图片中可以看到默认的引导程序样式覆盖了为导航栏编写的样式。

到目前为止我所做的是将所有其他css文件实现为少一个文件，如下所示：

@import "../tradesolution.css";
@import "../site.css";
@import "../nykladd.css";
@import "for";
@import "kladd.less";
@import "~bootstrap/less/bootstrap";
@import "~bootstrap/less/alerts.less";
@import "~bootstrap/less/mixins/buttons.less";
@import "~font-awesome/less/font-awesome.less";

然后将较少的文件编译为css并加载到Ztyles.css中，但无论我在何处放置导入，我的样式仍然被覆盖。我也尝试更改webpack规则的顺序以及插件中extractCSS和extractLESS的顺序

我不认为我的预期解决方案是良好的做法，因此非常欢迎任何解决此问题的方法。

Answer 1

过了一段时间我偶然发现了一个新的css框架postcss，他们有各种各样的插件，通过这种配置，我得到了它的工作：

{
                test: /\.css$/,
                use: [ 
                    'style-loader',
                    { loader: 'css-loader', options: { modules: true, importLoaders: 1 }, 
                     loader: 'postcss-loader', 
                    },
                ]
            },
            {    test: /\.less$/,
                use: extractLESS.extract(
                    {fallback:'style-loader', use: ['css-loader', 'less-loader']}
                )
            },

以下是一些有用的资源：

https://github.com/postcss/postcss

https://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591

https://github.com/Crunch/postcss-less

重新排列ccs包

1 个答案: