title: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript) when I use scss in rollup
body: <p>When I use Scss in rollup, and When I build project then there is a error:</p>
  <pre><code>[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
  components/styles/index.scss (3:0)
  1: @import 'variables';
  </code></pre>
  <p>I tried some methods but not success, such as <code>rollup-plugin-postcss</code> or <code>rollup-plugin-scss</code>. And I changed <code>sass</code> to <code>node-sass</code>, but another problem appear because I used a syntax like <code>$spacer / 2</code>.</p>
  <p>This is my package.json</p>
  <pre class="lang-json prettyprint-override"><code>  &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.18.6&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.18.6&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.18.6&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.18.6&quot;,
      &quot;@rollup/plugin-babel&quot;: &quot;^5.3.1&quot;,
      &quot;@rollup/plugin-commonjs&quot;: &quot;^22.0.1&quot;,
      &quot;@rollup/plugin-json&quot;: &quot;^4.1.0&quot;,
      &quot;@rollup/plugin-node-resolve&quot;: &quot;^13.3.0&quot;,
      &quot;@rollup/plugin-replace&quot;: &quot;^4.0.0&quot;,
      &quot;@types/classnames&quot;: &quot;^2.3.1&quot;,
      &quot;@types/react&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-transition-group&quot;: &quot;^4.4.4&quot;,
      &quot;cross-env&quot;: &quot;^7.0.3&quot;,
      &quot;node-sass&quot;: &quot;6.0.1&quot;,
      &quot;postcss&quot;: &quot;^8.4.14&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;,
      &quot;rollup&quot;: &quot;^2.76.0&quot;,
      &quot;rollup-plugin-css-porter&quot;: &quot;^1.0.2&quot;,
      &quot;rollup-plugin-peer-deps-external&quot;: &quot;^2.2.4&quot;,
      &quot;rollup-plugin-postcss&quot;: &quot;^4.0.2&quot;,
      &quot;rollup-plugin-postcss-retain-sass-data&quot;: &quot;^2.0.3&quot;,
      &quot;rollup-plugin-scss&quot;: &quot;^3.0.0&quot;,
      &quot;rollup-plugin-styles&quot;: &quot;^4.0.0&quot;,
      &quot;rollup-plugin-terser&quot;: &quot;^7.0.2&quot;,
      &quot;rollup-plugin-typescript2&quot;: &quot;^0.32.1&quot;,
      &quot;sass&quot;: &quot;^1.53.0&quot;,
      &quot;typescript&quot;: &quot;^4.7.4&quot;
    }
  </code></pre>
  <p>This is index.scss</p>
  <pre class="lang-css prettyprint-override"><code>@import 'variables';
  
  // layout
  @import 'normalize';
  
  // mixin
  @import './mixins';
  
  // animation
  @import './animation';
  
  // alert
  @import '../Alert/style';
  </code></pre>
  <p>Is there some methods to solve this problem?</p>