如何预处理作用域的CSS（sass）

Question

有谁知道怎么做？如果只能使用SASS，Riot scoped css会很棒。我检查了docs，但无法理解所需要的内容。

我希望能够：

<style scoped>
  @extend %my-sass-extension;

  h1 {
    color: $my-color;
  }
</style

Answer 1

如果你使用webpack，你可以在脚本标签中导入scss，如下所示：

<script>
  import './page-head.scss'
</script>

我的webpack配置：

// webpack.config.js
module.exports = {
...
module: {
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
    }]
}
};