Question

我正在使用angular和webpack构建一个SPA，而且我在这里也使用的更少，所以这可以帮助以后的网站主题。但这里的问题是角度ui路由器只需要css文件，我似乎没有找到由webpack飞行生成的css文件。关于如何在不考虑主题选项的情况下如何使用css的任何建议，以后也需要。

任何帮助表示赞赏并将帮助我的工作走上正轨。谢谢！

Answer 1

默认情况下，webpack会在<style>文件的index.html标记中包含您的每个CSS文件（来自lib并生成）。

您需要一些插件来从LESS文件生成CSS并将CSS文件解压缩为单独的文件：

以下是我的LESS / CSS部分的webpack配置文件的摘录。我正在处理来自librairies的一些CSS文件，这些文件在libs.css和一个主LESS文件（包括20多个其他LESS文件）中连接在一起，该文件在style.css文件中编译。

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('libs.css');
var extractLESS = new ExtractTextPlugin('style.css');

module.exports = {
    ...
    module: {
        ...
        loaders: [{
            // load css without sourcemap
            test: /\.css$/,
            loader: extractCSS.extract(
                'css'
            )
        }, {
            // compile less with source maps
            test: /\.less$/,
            loader: extractLESS.extract(
                'css?sourceMap!less?sourceMap'
            )
        }]
    },
    plugins: [
        // extract inline css into separate files with sourcemaps
        extractCSS,
        extractLESS
    ],
    resolve: {
        alias: {
            ...
            'less': path.join(__dirname, 'src/less'),
            'css': path.join(__dirname, 'src/css'),
        }
    }
};

使用webpack从较少的文件中获取css文件

1 个答案: