在webpack运行上加载css文件

时间:2017-02-05 12:50:03

标签: angular webpack webpack-2

我想一直加载一个css文件

在我的angular2捆绑中(我使用的是我自己的锅炉板,非ng-cli)

像ng-cli一样使用style.css。

我不想加载它,例如使用导入

在main.ts或app.component.ts中,但是通过webpack。

有什么办法?

任何提示?

提前致谢

排序(不起作用)

{
   test: require.resolve(helpers.root('src','styles.css')),
   loader: 'imports-loader'
}

试过这个(它不起作用)

entry: {
   'styles': './src/styles.scss',
   'polyfills': './src/polyfills.ts',
   'main':      './src/main.ts'
},
new CommonsChunkPlugin({
   name: 'styles',
   chunks: ['styles']
})

2)尝试

主要-style.loader.js

const path = require('path');
const fs = require('fs');
module.exports = function(source) {
    this.cacheable();
    const callback = this.async();
    const stylesPath = path.resolve(__dirname,'../src','styles.scss');
    this.addDependency(stylesPath);
    fs.readFile(stylesPath, "utf-8", function(err, header) {
        if(err) return callback(err);
        console.log(header,source);
        callback(null, header + "\n" + source);
    });
};

的WebPack

{
   use: [
      'raw-loader',
      'sass-loader',
      'postcss-loader',
      helpers.root('config','main-style.loader.js')
   ]
 }

但我有

Error: Child compilation failed:
  Module build failed: Unknown word (7:1)
    5 | }
    6 | 
  > 7 | 
      | ^
    8 | 
    9 | 
  :
  Syntax Error: Unknown word (7:1)
    5 | }
    6 | 
  > 7 | 
      | ^

3)尝试感谢@bebraw

提示来自 https://github.com/peerigon/extract-loader (你应该有一个postcss.config.js)

它的工作唯一的缺点是.my类变得像

.QZ4j2umHjjSjpjIMYOm2C

const mainCss = [
  'postcss-loader',
  'css-loader',
  helpers.root('src','styles.css')
];
mainCss.unshift('style-loader');
entry: {
  'polyfills': './src/polyfills.ts',
  'main':      './src/main.ts',
  'mainstyles': mainCss.join('!')
},

观看

css loader modules标志 应该设置为false和 它有效:D

0 个答案:

没有答案