Question

需要将我的styles.less文件转换为CSS包，以便在我的索引页面上使用。我假设style.less文件将使用less loader加载并使用less编译。从那时起它将被传递给css-loader，但似乎css-loader不能处理更少的语法，这是我的错误所指示的。我提供了代码，只是想知道如何设置我的webpack.config.js文件来处理style.less通过多个加载器传送。任何帮助，将不胜感激。谢谢！

style.less

// BOOTSTRAP W RESPONSIVE
@import './../../node_modules/bootstrap/less/bootstrap.less';
// MATERIAL DESIGN ICONIC FONT
@import '~material-design-iconic-font/less/material-design-iconic-font.less';
@md-font-path: '~material-design-iconic-font/fonts';
@import (inline) './../../node_modules/pnotify/src/pnotify.css';
@import (inline) './../../node_modules/select2/select2.css';
@import (inline) './../../node_modules/pace-js/themes/blue/pace-theme-center-simple.css';
@import (inline) './../../node_modules/jstree/dist/themes/default/style.css';
@import (inline) './../../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
@import (inline) './../../node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css';
@import (inline) './../../node_modules/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css';
@import (inline) './../../node_modules/bootstrap-tokenfield/dist/css/tokenfield-typeahead.css';
@import "variables.less";   
@import "w-helpers.less";   // Helper Classes
@import 'w-mixins.less';

webpack.config.js

'use strict';

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const plugins = require('./plugins');

const PATHS = {
  app: path.resolve(__dirname, 'public', 'js', 'main.js'),
  build: path.resolve(__dirname, 'public', 'build'),
  style: path.resolve(__dirname, 'public', 'less', 'style.less')
};

const common = {
    entry: {
      app: PATHS.app,
      style: PATHS.style,
      vendor: [
        ....
      ]      
    },
    output: {
      path: PATHS.build,
      filename: '[name].js'  
    },
    target: 'web',
    module: {
      loaders: [             
        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},       
        { test: /\.json$/, loader: 'json' },
        { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' },
        { test: /(\.tpl|\.html)$/, loader: 'underscore-template-loader' }
      ]
    }, 
    plugins: [     
      new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),

      new webpack.ProvidePlugin({ 
        ....
      }),

      new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
    ], 
    resolve: {
      alias: {
        ....
      }
    }
  }

var config;

// Detect how npm is run and branch based on that
switch(process.env.npm_lifecycle_event) {
  case 'build:dev':
    config = merge(
      plugins.clean(PATHS.build),
      common,
      plugins.extractCSS(PATHS.style),
      { devtool: 'source-map' }     
    );
    break;
  case 'build:prod':
    config = merge( 
      plugins.clean(PATHS.build),
      common,      
      plugins.minify(),
      plugins.extractCSS(PATHS.style)
    );
    break;
  default:
    config = merge(
      plugins.clean(PATHS.build),
      common,
      plugins.extractCSS(PATHS.style),
      { devtool: 'eval-source-map' }      
    );
}

module.exports = validate(config);

plugins.js

const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

exports.extractCSS = function(paths) {
  return {
    module: {
      loaders: [
        // Extract CSS during build
        {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader', 'less-loader'),
          include: paths
        }
      ]
    },
    postcss: function () {
        return [require('autoprefixer'), require('precss')];
    },
    plugins: [
      // Output extracted CSS to a file
      new ExtractTextPlugin('[name].css')
    ]
  };
}

错误在./~/css-loader!./~/postcss-loader!./public/less/style.less 模块构建失败：未知单词（1：1）

1 | // BOOTSTRAP W RESPONSIVE
  | ^
2 | @import './../../node_modules/bootstrap/less/bootstrap.less';
3 |

@ ./public/less/style.less 4：14-125

Webpack：CSS导入功能较少的加载器

0 个答案: