Question

我正在使用ES6，angularjs，less和webpack创建我的应用程序。在我的场景中，我希望使用ES6导入语法来加载less / css样式。因此，如果我少创建两个文件：

test1.less

@bg: #ffffff;

test2.less

.test-class {background-color: @bg;}

然后我在应用程序模块中导入了较少的文件

import angular from 'angular';
import './test1.less';
import './test2.less';

export default angular.module('vt.shared', []).name;

我收到未定义@bg的错误。这是否意味着我不能使用更少的变量和ES6导入？如何解决这个问题？

我的webpack加载器配置：

config.module = {
        rules: [{
            // JS LOADER
            // Reference: https://github.com/babel/babel-loader
            // Transpile .js files using babel-loader
            // Compiles ES6 and ES7 into ES5 code
            test: /\.js$/,
            loader: 'babel-loader',
            // exclude: [/node_modules/, /playground/, /coverage/, /karma/],
            include: babelInclude,
            // query: {compact: false}

        }, {
            test: /\.less$/,
            use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        }, {
            // ASSET LOADER
            // Reference: https://github.com/webpack/file-loader
            // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
            // Rename the file using the asset hash
            // Pass along the updated reference to your code
            // You can add here any file extension you want to get copied to your output
            test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
            loader: 'file-loader'
        }, {
            // HTML LOADER
            // Reference: https://github.com/webpack/raw-loader
            // Allow loading html through js
            test: /\.html$/,
            loader: 'raw-loader'
        }, {
            test: /font-awesome\.config\.js/,
            use: [
                {loader: 'style-loader'},
                {loader: 'font-awesome-loader'}
            ]
        }, {
            test: /ui-sortable/,
            use: 'imports-loader?$UI=components-jqueryui/ui/widgets/sortable'
        }]
    };

未定义Webpack ES6的导入可变项

0 个答案: