to-string loader for webpack

Usage 使用

let output = require('to-string!css!sass!./my.scss');
// => returns sass rendered to CSS a string
把sass转换成为css的字符串，并返回

Don't forget to polyfill require if you want to use it in node. 如果你在node中使用to-string-loader，那么不要忘记添加require See webpack documentation. 请参阅webpack文档。

Use Case 用例

If you setup a SASS loader:. 如果您设置了SASS加载器：

{
    test: /\.scss$/,
    loaders: [
        'css',
        'sass'
    ]
},

then require('./my.scss') will return an Array object: 那么require('./ my.scss')将返回一个Array对象：

0: Array[3]
    0: 223
    1: "html,↵body,↵ol,↵ul,↵li,↵p { margin: 0; padding: 0; }↵"
    2: ""
    length: 3
i: (modules, mediaQuery) { .. }
length: 1
toString: toString()

In some cases (e.g. Angular2 @View styles definition) you need to have style as a string. 在某些情况下（例如Angular2 @View 样式定义），您需要将样式作为字符串。您可以将require输出转换为字符串，例如

@View({
    directives: [RouterOutlet, RouterLink],
    template: require('./app.html'),
    styles: [
        require('./app.scss').toString()
    ]
})

or you can use to-string loader that will do that for you: 或者您可以使用to-string加载程序来为您做到这一点：

{
    test: /\.scss$/,
    loaders: [
        'to-string',
        'css',
        'sass'
    ]
},

下面的代码是angular starter 中的关于css的配置和处理：项目的关于css的相关文件比如css，scss可能存在两个位置。一个是在app目录或者是app目录的子目录，这里面的css或者是scss文件都是给组件使用的。另一个是在styles目录下，这个是全局的样式文件，不是给任何一个组件使用的文件。所以针对这两个地方的文件处理应该是不一样的。

另外，针对开发模式和生产模式，也有不同的配置。 webpack.common.js

/**
         * To string and css loader support for *.css files (from Angular components)
           转换为字符串  并且  css loader支持*.css文件（那些来自angular组件的）。
         * Returns file content as string
           将文件内容作为字符串返回
         *
         */
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader'],
          exclude: [helpers.root('src', 'styles')]
         //注意这里只是处理那些组件中的css相关的。而不处理styles目录下的任何东西。
        },

        /**
         * To string and sass loader support for *.scss files (from Angular components)
            转换为字符串  并且  sass loader支持*.scss文件（那些来自angular组件的）。
         * Returns compiled css content as string
           将文件内容作为字符串返回
         *
         */
        {
          test: /\.scss$/,
          use: ['to-string-loader', 'css-loader', 'sass-loader'],
          exclude: [helpers.root('src', 'styles')]
         //注意这里只是处理那些组件中的scss相关的。而不处理styles目录下的任何东西。
        },

webpack.dev.js

/**
         * Css loader support for *.css files (styles directory only)
           css loader 支持* .css文件（仅限样式目录）
         * Loads external css styles into the DOM, supports HMR
           将外部CSS样式加载到DOM中，支持HMR
         *
         */
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: [helpers.root('src', 'styles')]
          //注意，因为这个样式不是给组件使用的全局样式，所以这些样式应该使用style-loader来进行处理。
        },

        /**
         * Sass loader support for *.scss files (styles directory only)
            Sass loader支持* .scss文件（仅限样式目录）
         * Loads external sass styles into the DOM, supports HMR
           将外部sass样式加载到DOM中，支持HMR
         *
         */
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        },

webpack.prod.js

  /**
         * Extract CSS files from .src/styles directory to external CSS file
            将CSS文件从.src/styles目录提取到外部CSS文件
         */
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          }),
          include: [helpers.root('src', 'styles')]
          //只是针对styles目录下的css文件进行提取
        },

        /**
         * Extract and compile SCSS files from .src/styles directory to external CSS file
           将.src/styles目录中的SCSS文件提取，并编译成外部CSS文件
         */
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!sass-loader'//先用sass-loader进行处理
          }),
          include: [helpers.root('src', 'styles')]
          //只是针对styles目录下的css文件进行提取
        },

注意整个过程中，没有把app目录下的组件中的css相关，单独的提取形成文件。

只有在prod模式下，配置了ExtractTextPlugin用来提取css内容。 webpack.prod.js

 /**
       * Plugin: ExtractTextPlugin
       * Description: Extracts imported CSS files into external stylesheet
       * 说明：将导入的CSS文件提取到外部样式表中
       * See: https://github.com/webpack/extract-text-webpack-plugin
       */
      new ExtractTextPlugin('[name].[contenthash].css'),

Christian-Yang / Translate-and-save

to-string-loader 学习笔记 #10

to-string loader for webpack

Usage 使用

Use Case 用例