Question

我正在尝试使用less-loader来编译与我的Angular 2 .ts组件相关联的.less文件，对于我的生活，我无法让它正常工作。

module.exports = {

  entry: './client/main.ts',
  output: {
  path: './dist',
  filename: 'app.bundle.js'
 },
  module: {
  loaders: [
           {test: /\.ts$/,
            exclude: /node_modules/,
            loader: 'ts'},
            {test: /\.html$/,
            exclude: /node_modules/,
            loader: 'raw'},
            {test: /\.css$/,
            exclude: /node_modules/,
            loader: 'css-loader'},
            {test: /\.less$/,
            exclude: /node_modules/,
            loader: 'raw!less-loader'}
            ]
     },

     resolve: {
     extensions: ['', '.js', '.ts', '.html', '.css', '.less']
     },
     plugins: [
     new HtmlWebpackPlugin({
     template: './client/index.html'
     }),
     new webpack.DefinePlugin({
     app: {
     environment: JSON.stringify(process.env.APP_ENVIRONMENT || 
     'development')
  }

我已经通过npm安装了'less-loader'。我将我的样式加载到我的组件中，如下所示从@ @ angular / core导入{Component};

@Component({
    selector:'welcome',
    template: require('./welcome.component.html'),
    styleUrls: require('./welcome.less')
 })
 export class WelcomeComponent{}

我的文件夹结构是

-webpack.config.js
    -client/
        -welcome/
            welcome.component.ts
            welcome.less

这是完整的错误

app.bundle.js:13838 Uncaught TypeError: stylesheet.styles.map is not a 
function
    at DirectiveNormalizer.normalizeStylesheet 
(http://localhost:3000/app.bundle.js:13838:46)
    at DirectiveNormalizer.normalizeLoadedTemplate 
(http://localhost:3000/app.bundle.js:13778:46)
    at DirectiveNormalizer.normalizeTemplateSync 
(http://localhost:3000/app.bundle.js:13763:24)
    at DirectiveNormalizer.normalizeDirective 
(http://localhost:3000/app.bundle.js:13739:46)
    at RuntimeCompiler._createCompiledTemplate 
(http://localhost:3000/app.bundle.js:17139:211)
    at http://localhost:3000/app.bundle.js:17077:44
    at Array.forEach (native)
    at http://localhost:3000/app.bundle.js:17075:51
    at Array.forEach (native)
    at RuntimeCompiler._compileComponents 
(http://localhost:3000/app.bundle.js:17074:46)

非常感谢任何帮助，谢谢！

Answer 1

我使用了以下设置

安装越来越少的装载程序：

npm install --save-dev less
npm install --save-dev less-loader

在你的webpack配置中（即＆＃34; webpack.common.js＆＃34;），首先需要这个插件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

并添加这些规则。第一个处理应用程序外的文件较少，第二个处理应用程序内的文件较少：

{
    test: /\.less$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!less-loader' })
},
{
    test: /\.less$/,
    include: helpers.root('src', 'app'),
    loader: 'raw-loader!less-loader'
},...

在您的主应用中（即＆＃34; app.component.ts＆＃34;），导入您的少主文件。

import '../../assets/css/main.less';

在组件内部（即＆＃34; view.component.ts＆＃34;）：

@Component({
    ...
    styleUrls: ['./../styles/view.component.less']
})

在less less文件中（例如＆＃34; view.component.less＆＃34;）：

// import from node modules
@import "~bootstrap/less/variables.less";
@import "~bootstrap/less/mixins.less";
// import custom less files
@import "../../assets/css/variables.less";

Webpack Angular 2 less-loader配置

1 个答案: